垂直对齐:中文字不工作
我想对齐,中间垂直<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>
还有一些时间,我有2行文字,所以如果我使用保证金或行高的填充它不会为2行文字工作。就像这个例子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
}
为您
.cbheading {
background: #000;
color: #c7a375;
padding: 5px;
height: 30px;
display: table;
width: calc(100% - 10px);
}
.cbheading b {
display: table-cell;
vertical-align: middle;
}
试试这个代码。 将此代码复制到您的CSS中。
.cart_channels_main {
float: left;
height:auto;
margin: 0 15px 15px 0;
text-align: center;
width: 100%;
vertical-align:middle;
}
.cbheading {
background: #000 none repeat scroll 0 0;
color: #c7a375;
height: auto;
font-family: "Roboto Condensed",sans-serif !important;
vertical-align:middle;
line-height: 30px;
}
请再次检查的问题,我刚刚更新了我的问题。它不会工作2行文本 –
检查答案我jsut更新了我的答案。 –
检查链接也是.... https://jsfiddle.net/oxusmkvh/4/ –
您可以添加line height
添加这个..
CSS
.cart_channels_main {
float: left;
height: 285px;
margin: 0 18px 15px 0;
text-align: center;
width: 100%;
vertical-align: middle;
line-height: 20px;
}
而且你能做到这样也.. 而不是上面你可以添加padding-top
使文本垂直对齐。
.cbheading {
background: #000 none repeat scroll 0 0;
color: #c7a375;
height: 30px;
Padding-top:10px;
font-family: "Roboto Condensed",sans-serif !important;
}
请再次检查问题,我刚刚更新了我的问题。它不会工作2行文字 –
@himanshuarchirayan如果你增加的高度比我认为它会工作 –
是的,但如果我增加高度,那么单行文本看起来很奇怪。 –
添加height:auto
代替height:30px;
试试这个
.cbheading {
background: #000 none repeat scroll 0 0;
color: #c7a375;
height:auto; //changed this
padding: 5px;
font-family: "Roboto Condensed",sans-serif !important;
vertical-align:middle;
line-height: 30px;
}
谢谢,但我想高度固定。因为我有很多div,如果我让高度自动然后它看起来很奇怪。 –
您可以将显示属性。
.cbheading{
display: table;
width:100%;
}
.cbheading b{
display: table-cell;
vertical-align : middle;
}
是的,它在小提琴中工作,但是当我将它应用于我的网站时,它会变得奇怪,看到这个[link](http://test.coachfxlive.com/shop) –
您可以为正确对齐添加隐藏的元素:
.cbheading:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
请再次检查的问题,我刚刚更新了我的问题。它不会工作2行文本 –
是它的工作在小提琴中,但没有在我的网站工作。这里是[链接](http://test.coachfxlive.com/shop) –
是请张贴 –