垂直居中文本的單個字符？

我試圖中心的一個字符，例如：垂直居中文本的單個字符？

<div class='button'>x</div> 
<div class='button'>+</div> 
<div class='button'>*</div> 

.button { 
    border: solid 2px #aaa; 
    -moz-border-radius:2px; 
    -webkit-border-radius:2px; 
    color: #888; 
    width: 16px; 
    height: 16px; 
    font-weight: bold; 
    text-align:center; 
    float: left; 
    margin-right:5px; 
    font:14px Helvetica Neue,Helvetica,Arial,sans-serif; 
    line-height: 100%; 
}

這個中心，在每個字符水平div的，而不是垂直方向 - 我們需要什麼做居中垂直呢？

感謝

來源

2010-09-05 user246114

因爲它是一個單一的字符：

line-height: 100%;

，如果設置line-height到100％沒有工作，將其設置爲容器的固定高度：

.button { 
    height:300px; 
    width: 300px; 
    text-align: center; 
    line-height: 300px; 
    border: 1px dotted #999; 
}

在這裏檢查：http://jsfiddle.net/7afUH/1/

來源

2010-09-05 14:45:49 aularon

阿好吧，工程，按鈕與asteric將無法工作，因爲我認爲它的放置方式與+和x不同。我更新了上面的CSS。謝謝。 – user246114 2010-09-05 14:51:23

我編輯了答案，現在檢查。 – aularon 2010-09-05 14:52:12

這是因爲'*'字符已經看起來像這樣，它在字符空間的上半部分，如果你需要它在中心，你需要爲特定字符做一些填充，或者尋找一些類似的unicode字符看起來像它，但它更大，填滿了空間而不是頂部。 – aularon 2010-09-05 14:56:04

垂直居中文本的單個字符？

回答

相關問題