垂直對齊：中文字不工作

我想對齊，中間垂直<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

垂直對齊：中文字不工作

回答

相關問題