html - 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>是浮动的。