选中垂直居中文本

Question

图像

问题

有什么方法可以将“温哥华，不列颠哥伦比亚省”的文字稍微改一下，以便与“城市”和“改变”更好地对齐？

我知道输入元素对于跨浏览器的风格很挑剔;它不一定是完美的，但如果它至少可以在某些浏览器中运行，那就太棒了。

fiddle

Answer 1

由于以下几个原因，通常不建议自定义浏览器的某些表单元素的默认呈现（尤其是下拉列表选择列表）：

• 您的自定义选项自然受限
• 很难让表单元素看起来像你想要的那样 - 正如你所指出的那样，他们很挑剔
• 即使您可以在一个浏览器中获得您想要的输入，但几乎不可能跨浏览器进行操作（我意识到您说这不是一个问题，但仍然是，它＆＃39;值得了解）
• 从可用性的角度来看，自定义表单元素的默认呈现几乎总是会降低表单的可用性

现在，所有这一切，如果你想要更多地控制表单元素的视觉样式，我建议使用jQuery插件。通常，这些工作通过隐藏表单元素并用易于定制的CSS替换它们 - 通常是常规的＆＃39; unordered-lists - 然后将用户与无序列表的交互发送到隐藏表单。 Here's one you could check out to get started.

Answer 2

我会调整字体大小或高度来修复对齐问题：

#city_picker {
    height: 26px;
    font: 19px Arial,Helvetica,sans-serif;
}

这将使文本与选择框大小相同，并强制它显示为对齐。否则，如果不是不可能的话，在浏览器中调整选项元素的样式似乎相当困难。