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需要与您希望文本垂直居中的元素的高度值相同。

注意: fiddle 有height:40px而有问题的代码有 height:30px .只需选择 line-height以匹配高度。

vertical-align 实际上会移动整个 <label> (和文本)向下但仅适用于行内级和表格单元格元素。它不适用于您的情况，因为 <label>是 float 的。