如何使用 css 和 html 对齐文本和图像？左右位置？

Question

如何使用 css 和 html 对齐文本和图像？左右位置。谢谢你的帮助，将不胜感激。

这是我想要实现的设计

到目前为止，这是我的代码

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="not-button btn-long- d-flex pull-right">
    <div class="row">
      <div class="col-4">
        <img src="../../assets/img/video/icon_screen_phone.png" class="video-btn-icon">
      </div>
      <div class="col-4">
        <h5 style="margin-top:10px;margin-left:-10px;">Online</h5>
      </div>
      <div class="col-4">
        <h5 style="float:right;">Plugin Status</h5>
      </div>
    </div>
</button>

Answer 1

你可以玩flexbox，变化是无限的。我建议将 div 设计成您喜欢的 button。单独使用 css，而不是在元素内部使用 style=""。学习bootstrap，如果你会用

其中一个变体可能如下所示。

.circle-green {
  background-color: lightgreen;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}

.properties {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 50%, rgba(198,200,201,1) 100%);
  max-width: 400px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex m-2 p-3 properties">
  <div class="mr-auto">
    <span class="mr-1">&#9742;</span>
    <span>Online</span>
  </div>
  <div class="ml-auto d-flex align-items-center">
    <span class="mr-2">Plugin Status</span>
    <span class="circle-green"></span>
  </div>
</div>

如何使用 css 和 html 对齐文本和图像？左右位置？

How to align text and image using css and html ? left and right position?

html

css

margin

twitter-bootstrap

到目前为止，这是我的代码