center align css3 styled drop down menu

Asked Apr 23 '16 at 14:18

Active Apr 24 '16 at 10:14

Viewed 56 times

I'm using this example to style drop down menu using CSS jsfiddle.

HTML:

<div class="styled-select blue">
  <select name="brand" id="brand">
    <option>Choose category first</option>
    <option>Brand one</option>
    <option>Brand two</option>
  </select>
</div>

CSS:

.styled-select {
    background: #fff url('http://www.myiconfinder.com/uploads/iconsets/20-20-1383000fade3dbdf3e93972212606011-Arrow.png') no-repeat 10px center;
    height: 31px;
    text-align: center;
    overflow: hidden;
    width: 80%;
    margin-bottom: 15px;
}
.styled-select select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 31px;
    width: 103%;
    float: left;
    text-align: center;
    /*padding-left:48%*/
}

But the text is aligned left not centered. There's a way to set padding left to the select tag itself but does not center text correctly so how to fix this?

edited Apr 24 '16 at 10:14

Nisse Engström

4,738
23
27
42

asked Apr 23 '16 at 14:18

jq beginner

1,010
3
21
41

your fiddle shows the text aligned center, so I can't understand your issue – dippas Apr 23 '16 at 14:22
My chrome-v50... is showing centered – Salathiel Genese Apr 23 '16 at 14:26
chrome 49 does not – jq beginner Apr 23 '16 at 14:27
it is centered in Firefox for me http://s31.postimg.org/subzh3i17/center.png – mlegg Apr 23 '16 at 14:27
Edge does not center the text too – jq beginner Apr 23 '16 at 14:28
updated chrome to v 50 and still not centered @Salathiel Genèse – jq beginner Apr 23 '16 at 14:34
Sorry, I'm using but firefox-45... this time around. Apologize! – Salathiel Genese Apr 23 '16 at 14:48
1

Possible duplicate of [Is it possible to center text in select box?](http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) – Brian Tompsett - 汤莱恩 Apr 24 '16 at 15:54

center align css3 styled drop down menu

0 Answers0