我有一个全 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
我得到的结果是:
要求的输出,
按照您提到的方式进行更改后,
最佳答案
您似乎希望每个元素都在其父级中垂直和水平居中。
.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;
关于html - 我想使用 Bootstrap 将 `div` 置于另一个具有背景和 `span` 的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53994200/