我试图在中间垂直对齐<div>
文本。这是我试过的JSFiddle。但这对我不起作用。
.cart_channels_main {
float: left;
height: 285px;
margin: 0 18px 15px 0;
text-align: center;
width: 100%;
vertical-align: middle;
}
.cbheading {
background: #000 none repeat scroll 0 0;
color: #c7a375;
height: 30px;
padding: 5px;
font-family: "Roboto Condensed", sans-serif !important;
vertical-align: middle;
}
<div class="col-sm-3">
<div class="cart_channels_main">
<div class="cbheading"><b>vertical align middle</b>
</div>
</div>
</div>
有时我有两行文字,所以如果我使用边距或行高的填充,它将不适用于两行文字。就像在这个例子中LINK
最佳答案
试试这个
.cbheading {
background: #000 none repeat scroll 0 0;
color: #c7a375;
height: 30px;
padding: 5px;
font-family: "Roboto Condensed",sans-serif !important;
vertical-align:middle;
line-height: 30px;//added
}
Demo
为你
.cbheading {
background: #000;
color: #c7a375;
padding: 5px;
height: 30px;
display: table;
width: calc(100% - 10px);
}
.cbheading b {
display: table-cell;
vertical-align: middle;
}
关于html - 垂直对齐:文本上的中间不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32557959/