我想使用Bootstrap将`div`居中放置在另一个具有背景和`span`中吗？

Question

我有一个全角引导程序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;

...如果您旋转设备，或者在任何其他视宽比与当前测试视口比率不同的设备上，它将不再是正方形。
您可能想用em或rem表示尺寸。即：

width: 4.8rem;
height: 4.8rem;

Answer 2

选中这个

.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;
  background-color: gray;
}
.CImage {
    background-image: url(../Responsive/img/Under.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 23vw;
    height: 8.7vh;
    background-color: red;
    justify-content: center;
    display: flex;
}
.Upper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../Responsive/img/Upper.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22.8vw;
    height: 8.7vh;
    background-color: black;
}
.inner {
    background-image: url(../Responsive/img/Inner.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: blue;

    width: 20.8vw;
    height: 6.7vh;
}

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