如何使我的 html 文本容器更具响应性？

Question

我的网站如下所示：

桌面：

手机：

但是，我需要将文本与相应图像的中间内联（两个项目都居中，这样子文本就不会偏离中心）。

我的 HTML：

<div class="col-lg-3>
<div class="container--wrap">
        <div class="inward-text">
          <br>
          <img src="green-up.png" class="center" style="vertical-align: middle;">
          <br>
          <span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span>
          <br>
          <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
          <img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
          <br>
          <br>
          <br>
          <br>
          <div id="txtdown">
            <span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span>
            <br>
            <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
          </div>
          <img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;">
          <br>
          <br>
          <br>
          <div id="txtdown">
            <span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span>
            <br>
            <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span>
          </div>

        </div>

      </div>
</div>

相关CSS：

.container--wrap {
      background-color: #000000;
      border-radius: 15px;
      margin: 5px;
      overflow: hidden;
}
.col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
}
.col {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
}
.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 135px;
}
.inward-text span{
      display: inline;
      margin-left: 10px;
}
.inward-text img{
      margin-left: 80px;
      float: left;
}
#txtdown{
      margin-top: 10px;
}

我该如何做我想做的事？

编辑：

我为极度混乱的<br>s 提前道歉！

Answer 1

br 标记它不是最好的方法，我尽量简化你的解决方案，用你的图像和文本块应该是这样的：

<div class="items">
    <div class="item red">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>

    <div class="item green">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>

    <div class="item grey">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>
</div>

CSS

.items {
   display: flex;
   flex-direction: column;
}

.item {
   display: flex;
   align-items: center;
}

.item__text {
   display: flex;
   flex-direction: column;
}

并且不要使用be，使用margin或padding，这是一种更灵活可靠的方法。

Answer 2

HTML：

<div class="container--wrap">
      <div class="inward-text">
          <div class="flex">
              <img src="green-up.png" class="center" style="vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
              </div>
          </div>
          <div class="flex">
              <img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
              </div>
          </div>
          <div class="flex">
              <img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
              </div>
          </div>
      </div>
  </div>

CSS：

.container--wrap {
   background-color: #000000;
   border-radius: 15px;
   margin: 5px;
   overflow: hidden;
}

.flex {
   display: flex;
}

.col-lg-3 {
   flex: 0 0 25%;
   max-width: 25%;
}

.col {
   flex-basis: 0;
   flex-grow: 1;
   max-width: 100%;
}

.inward-text span {
   display: inline;
   margin-left: 10px;
}

#txtdown {
   margin-top: 10px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

Answer 3

第 1 步

从每个元素中删除所有内联样式，并将它们作为类放在 CSS 中，如下所示：

.percent {
  color: #EE939C;
  font-family: robotobold;
  font-size: 30px;
  vertical-align: middle;
}

.detail {
  color: #ffffff;
  font-family: robotolight;
  font-weight: lighter;
  font-size: 15px;
}

---

第二步

删除所有<br/>s

---

第三步

将每个项目包装为以下标记

<div class="fancy-item"> <!-- your group -->
  <img ...>
  <div> <!-- flexbox sub-group -->
    <span class="percent">1.80%</span>
    <span class="detail">from yesterday</span>
  </div>
</div>

添加 CSS 的其余部分：

.fancy-item {
  display: flex;
  align-items: center;
}

---

第四步

如果您想将它们稍微分开，请为.percent 添加一些下边距或为.detail 添加一些上边距。

---

你已经完成了！

注意：你不必使用我的类名，使用任何在你的上下文中有意义的东西。

另一个注意事项：步骤 1-3 是最重要的。如果您不喜欢某个特定的细节，它们允许您一次更改所有项目，而无需逐个检查并进行修改。 DRY 是编程中最重要的原则之一。