CSS生成的條帶中的文本對齊問題

我已經創建了一個簡單的文本內容放置條，如下圖所示。 Strip showing text above it CSS生成的條帶中的文本對齊問題

出於同樣的CSS是：

.strip { 
    display: block; 
    margin: auto; 
    float: left; 
    width: 6em; 
    height: 2em; 
    background: #090909; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
}

現在，我想要做的是讓文字在大道的中間，水平和垂直方向，而text-align: center幫助我實現文本的水平居中。我無法讓文字垂直居中。請注意，我的標記是<div class="strip">12345678</div>，我不願意在該div內使用任何span。並希望保持標記儘可能乾淨。我怎樣才能達到這種行爲？

謝謝。

來源

2012-03-04 Kushal

添加等於div高度的行高。檢查http://jsfiddle.net/VRBrr/2/

line-height:2em;

來源

2012-03-04 06:50:07 Abhidev

不夠公平。我也在尋找這樣的東西。謝謝 – AbdulAziz 2012-03-04 06:57:45

我玩過不同的'line-height'值，但沒有奏效。爲什麼線條高度與條帶高度相同？ – Kushal 2012-03-04 07:02:57

，因爲它將內容線的高度設置爲在內容上下等距離，因此將文本垂直對齊。另請注意，只有您擁有單行內容時，此解決方案纔會有效。 – Abhidev 2012-03-04 07:28:35

CSS生成的條帶中的文本對齊問題

回答

相關問題