Question

I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select’s text is in the bottom left corner of the element.

Does anyone know how to vertically-align the text inside an HTML select element?

Answer 1

Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn’t actually valid html.

However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.

So in this case you would need to set line-height: 28px; to match height: 28px;.

For your html I would recommend either using:

• <input type="text" /> if you are looking for a standard text input

  or

• If you are looking for a drop down selection:

  <select>
      <option value="Test1">Test 1</option>
      <option value="Test2">Test 2</option>
  </select>