I want to vertical-align text in select box

by

Your best option will probably be to adjust the top padding & compare across browsers. It’s not perfect, but I think it’s as close as you can get.

padding-top:4px;

The amount of padding you need will depend on the font size.

Tip: If your font is set in px, set padding in px as well. If your font is set in em, set the padding in em too.

EDIT

These are the options I think you have, since vertical-align isn’t consistant across the browsers.

A. Remove height attribute and let the browser handle it. This usually works the best for me.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

B. Add top-padding to push down the text. (Pushed down the arrow in some browsers)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

C. You can make the font larger to try and match the select height a little nicer.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

More Related Contents:

  1. How to vertically align an image inside a div
  2. How to vertically center content with variable height within a div?
  3. Vertically align text within a div [duplicate]
  4. vertical align middle in
  5. Select arrow style change
  6. How to display list items as columns?
  7. How to vertically middle-align floating elements of unknown heights?
  8. GWT theme style overrides my css style
  9. Vertical-align image
  10. Vertical align table-cell don’t work with position absolute
  11. CSS: How to align vertically a “label” and “input” inside a “div”?
  12. Align text to the bottom of a div
  13. Align vertically using CSS 3
  14. vertical-align image in div [duplicate]
  15. How to vertically align an image inside a div
  16. how to make sure select option text align in the center in IE?
  17. What’s the deal with vertical-align: baseline?
  18. How to Make Select Element be Transparent in Chrome?
  19. How to use particular CSS styles based on screen size / device
  20. How to make the items in the last row consume remaining space in CSS Grid?
  21. List of CSS vendor prefixes?
  22. @font-face works in IE8 but not IE9
  23. position: absolute without setting top/left/bottom/right?
  24. Select inputs and text inputs in HTML – Best way to make equal width?
  25. Animating max-height with CSS transitions
  26. How can I make a fieldset legend-style “background line” on heading text?
  27. How to reset/remove CSS styles for a specific element or selector only
  28. How do I detect the user’s browser and apply a specific CSS file?
  29. What CSS selector can be used to select the first div within another div
  30. CSS: How to change colour of active navigation page menu

Leave a Comment