html - 对齐标签中的字体

Question

有什么办法可以改变里面的 text 属性label使其接触基线？在示例中，州和市都高于基线。

http://jsfiddle.net/6VzLR/

HTML：

<div id="leftContent">
    <div id="state">
        <label for="state">State:</label>
        <select name="state">
            <option>State - Karnataka</option>
        </select>
    </div>
    <div id="city">
        <label for="city">City:</label>
        <select name="city">
            <option>City - Bangalore</option>
        </select>
    </div>
</div><!--leftContent-->

CSS：

#state label, #city label{
    width:40%;
    display:inline-block;
    margin: 3px 0 3px 6px;
}

Answer 1

CSS 边距属性中边距的顺序是左上右下。所以看起来你正在为右边距设置 0px，而不是为底部。试试这个：

margin: 3px 3px 0px 6px;

或者：

margin-bottom: 0px;

不过，我个人会更好地探索paddingcss 选项。

Answer 2

我将以下 CSS 应用于您的 HTML 片段：

label, select {
    font-family: arial;
    font-size: 2.0em;
    vertical-align: baseline; /* default value */
}
label {
    border: 1px solid gray;
    width:40%;
    display:inline-block;
    margin: 3px 0 3px 6px;
    text-align: right;
}

并得到以下结果：http: //jsfiddle.net/audetwebdesign/3CQbq/

标签中的文本和选择元素沿公共基线对齐，如果您增加字体大小，这一点会更加明显。

但是，您需要确保在 thelabel和select字段中使用相同的字体系列和字体大小以获得相同的对齐方式。（在您的示例中，即使字体不同，这似乎也不是问题。）

在您的示例中，文本沿同一基线对齐，两个框的底部也沿公共水平线对齐。

但是，标签周围的框比选择组的框高，因此这可能是您要修复的问题。

Answer 3

如果您为 指定高度，label您可以使用它line-height来调整文本的位置：

#state label, #city label{
    width:40%;
    display:inline-block;
    border:1px solid #000000;
    margin: 3px 0 3px 6px;
    line-height: 28px;
    height: 20px;
    vertical-align: bottom;
}

这是JSFiddle。

编辑：您可以添加

#state select, #city select {
    margin-bottom: 4px;
}

所以选择框的位置也相同。

这是更新的JSFiddle。