0

I got this html

<div class="select-wrapper">
    <select id="selectbox">
        <option value="1" selected="">Unit 1</option>
        <option value="2">Unit 2</option>
        <option value="3">Unit 3</option>
        <option value="4">Unit 4</option>
        <option value="5">Unit 5</option>
        <option value="6">Unit 6</option>
        <option value="7">Unit 7</option>
        <option value="8">Unit 8</option>
        <option value="9">Unit 9</option>
    </select>
</div>

and the css below

#selectbox{
    display: block;
    margin:0 auto;
    text-align: center;
    /*min-width: 120px;*/
    /*max-width: 300px;*/
    width:100%;
}

I need the width of the selectbox 100% of its parent element, and the text should be aligned centre.

The align centre was working when I only set the min,max width,it's not working once I changed the width to 100%.

or is there any other solution that I can center the text and max its width?

An simple example would be great

user2748930
  • 83
  • 1
  • 2
  • 8

1 Answers1

0

Add this to the select:

text-align-last:center; // doesn't work on Safari

It will center the text within the select itself, but it will not center options inside the dropdown.

The latter is not possible with a native select.

John Smith
  • 3,863
  • 3
  • 24
  • 42