在“输入选择”中对齐文本答案

【问题标题】：align text inside the "input select"在“输入选择”中对齐文本
【发布时间】：2011-11-30 17:53:19
【问题描述】：

我有一个带有css的简单表单，并且有一个具有这种样式的选择：

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
}

并且该选择中的文本始终与顶部和左侧对齐；有什么方法可以移动那个文本吗？

惊讶于 IE7、IE8 和 IE9 将文本中心设置为垂直。

【问题讨论】：

标签： html css forms input

【解决方案1】：

您只需要为样式添加填充，然后相应地调整高度和宽度。

例如

padding: 5px;

高度现在等于您的原始高度 - 10px（顶部和底部 5px 填充）宽度现在等于您的原始宽度 - 10px（左右填充 5px）

也正如@peduarte 建议的那样，您可以添加line-height，它实际上给出了与填充相同的结果。

【讨论】：

只是补充一点，line-height 也可以用于使该高度跨浏览器。
这只是一个惊喜，因为我放了一个像@TimBJames 这样的填充并且有效，但没有减少高度和宽度：image

【解决方案2】：

将此属性添加到 CSS

text-align:center

【讨论】：

我不想做中心，我只想要一些像 padding: 3px 0 0 5px;仅适用于选择内的文本，不适用于选择。

【解决方案3】：

试试这个，可能对你有帮助

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
    vertical-align:middle;
    line-height:1.8;
}

【讨论】：

只是把这个样式表的 html 部分放在我检查告诉你有什么问题

【解决方案4】：

将高度改为height: 22px;

【讨论】：