html - 我想使用 Bootstrap 将 `div` 置于另一个具有背景和 `span` 的中心？

Question

我有一个全 Angular Bootstrap row，其中三个 div 位于另一个内部，并带有背景图像。第三个 div 有用于显示数据的 span 标签。我的代码对齐有问题:

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-12 align">
      <div id="center">
        <div id="middle">
          <div class="CImage">
            <div class="Upper">
              <div class="inner"><span id="require" runat="server">140</span></div>
            </div>
          </div>
          <div id="title">Hello</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.align {
    text-align: center;
    justify-content: center;
    display: flex;
}
#center {
    width: 100vw;
    text-align: center;
    height: 15vh;
    justify-content: center;
    display: flex;
}
#middle {
    margin-top: 15px;
}
.CImage {
    background-image: url(../Responsive/img/Under.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 23vw;
    height: 8.7vh;
}
.Upper {
    background-image: url(../Responsive/img/Upper.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22.8vw;
    height: 8.7vh;
}
.inner {
    background-image: url(../Responsive/img/Inner.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;

    width: 20.8vw;
    height: 6.7vh;
}

现在他们正在显示结果，但图像对齐并不完美，尤其是在第三个 div

我得到的结果是:

要求的输出，

按照您提到的方式进行更改后，

Answer 1

您似乎希望每个元素都在其父级中垂直和水平居中。

.CImage, .Upper, .inner {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

... 应将 #require 置于 .inner 中心，将 .inner 置于 .Upper 和 中心>.Upper 在 .CImage 中。

---

旁注:如果您希望元素为正方形，请使用相同的值。即，

width: 23vw;
height: 8.7vh;

...如果您旋转您的设备，或者在任何具有与您当前正在测试的设备不同的 w/h 视口(viewport)比的设备上，将不再是正方形。
您可能想用 em 或 rem 来表示大小。即:

width: 4.8rem;
height: 4.8rem;