垂直对齐：中文字不工作

我想对齐，中间垂直<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

来源

2015-09-14 himanshu archirayan

试试这个

.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; 
}

来源

2015-09-14 05:44:36 akash

请再次检查的问题，我刚刚更新了我的问题。它不会工作2行文本 –

是它的工作在小提琴中，但没有在我的网站工作。这里是[链接]（http://test.coachfxlive.com/shop） –

是请张贴 –

试试这个代码。将此代码复制到您的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; 

}

来源

2015-09-14 05:44:50

请再次检查的问题，我刚刚更新了我的问题。它不会工作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; 

}

来源

2015-09-14 05:48:22

请再次检查问题，我刚刚更新了我的问题。它不会工作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; 

}

Demo Here

来源

2015-09-14 05:59:17

谢谢，但我想高度固定。因为我有很多div，如果我让高度自动然后它看起来很奇怪。 –

您可以将显示属性。

.cbheading{ 
    display: table; 
    width:100%; 
} 

.cbheading b{ 
    display: table-cell; 
    vertical-align : middle; 
}

来源

2015-09-14 06:01:59

是的，它在小提琴中工作，但是当我将它应用于我的网站时，它会变得奇怪，看到这个[link]（http://test.coachfxlive.com/shop） –

您可以为正确对齐添加隐藏的元素：

.cbheading:after { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}

来源

2015-09-14 07:01:02

垂直对齐：中文字不工作

回答

相关问题