我已经尝试使用 display:table 垂直居中的方法,但我无法完全让它工作。到目前为止,我的工作在这里:
我正在尝试将该文本垂直和水平居中。我认为这比正常情况下要难一些,因为我使用的是 bootstrap 跨度,但也许不是。任何提示都会很棒!
代码:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-left: 10px;
display: table;
padding: 10px;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box span {
position: relative;
width: 100%;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
<div data-bind="visible: !editing()" class="row-fluid card-box">
<div class="span2 card-details-box">
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
</div>
最佳答案
side-study-box
的 display:table
正在还原为 display:block
。添加一个 important
标志。 display:table !important
.
关于css - 如何使文本水平和垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15607022/