如何让我的 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>非常混乱，我提前表示歉意！

Answer 1

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 2

步骤 1

从每个元素中删除所有内联样式并将它们放在 CSS 中，如 classes，沿着这些行：

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

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

第 2 步

删除所有 <br/>

步骤 3

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

<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;
}

第 4 步

如果您想将它们稍微分开，请将一些底部边距添加到 .percent 或将顶部边距添加到 .detail。

大功告成！

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

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

Answer 3

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，更灵活可靠。

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

How can I make my html text containers more responsive?

html

css

image

margin

padding

步骤 1

第 2 步

步骤 3

第 4 步