css在真正的中心（垂直和水平）的位置標籤文本沒有移動標籤

Question

我想用CSS來定位標籤的文本在控件的確切中心。下面的CSS仍然將文本留在標籤的頂部。請有任何想法嗎？

JSFIDDLE

CSS

.plate_well { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 30px; 
    width: 30px; 
    text-align: center; 
    vertical-align: 15px; /* this doesnt do anything ?? */ 
    font-size: 7pt; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    border: 1px solid #AAAAAA; 

} 

HTML

<label class="plate_well" id="foo">bar</label> 

（我也有IE瀏覽器的問題，暫時無法呈現曲線，但是這是一個單獨的問題）

Answer 1

你可以改用line-height: 30px;來代替一行文字。該30px需求是相同的值元素的高度要垂直居中文本

注：小提琴有height:40px，而有問題的代碼有height:30px。只需選擇line-height以匹配高度。

vertical-align實際上將整個<label>（和文本）向下移動，但僅適用於內聯級別和表格單元元素。由於<label>浮動，它不適用於您的情況。