对齐标签中的字体

Question

有没有办法改变label内的文本属性，以便它接触基线？在该示例中，State和City都高于基线。

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 margin property中的边距顺序是右上角左下角。 所以看起来你正在为右边距设置0px，而不是为底边设置。 试试这个：

margin: 3px 3px 0px 6px;

或者：

margin-bottom: 0px;

我会更好地探索padding css选项。

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/

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

但是，您需要确保在label和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。