0

I'm trying to center horizontally and vertically a select box in chrome and safari.

Here is jsfiddle - [http://jsfiddle.net/xeqLsdo6/]1

The problem is that the text is not vertically aligned in Chrome and Safari even thought it is in firefox.

Thank you in advance.

user1484476
  • 11
  • 1
  • 5
    Always post your code in your question. You saw the warning about linking to jsFiddle without code, yet you chose to try and sidestep that rule by highlighting a link as code. – j08691 May 26 '15 at 14:21
  • Try to use this link. I hope it will help you. http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box – Dekel Zoaretz May 26 '15 at 14:29

2 Answers2

1

Just set the line-height for both. No need to work on inline-block display, they're both inline elements anyways. The problem with your fiddle is that you have forgot to insert the [dot] from the class form-group and if you're using Boostrap, you did not include the external CSS library.

Here is a working fiddle - http://jsfiddle.net/xeqLsdo6/2/

And on this page is a working scenario based on BS and your desired code. From here, you could work on line-heights and other stuff.

I don't really know what you mean by horizontal alignment. Is it about both label and select should stay in the middle of the screen or that the option element should be centered inside the select element?

Other than that, more explanations would not hurt anyone. Just firing up a code somewhere won't help you much, because you could forget things and a solution becomes less probable.

#state {
  display: inline;
  width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-6 col-sm-6">
  <label for="state">State:<span class="star">*</span></label>
  <select required id="state" name="state" title="State" class="form-control">
    <option value="">--None--</option>
    <option value="NSW">NSW</option>
    <option value="VIC">VIC</option>
    <option value="QLD">QLD</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="TAS">TAS</option>
    <option value="NT">NT</option>
    <option value="ACT">ACT</option>
    <option value="Other">Other</option>
  </select>
</div>
designarti
  • 609
  • 1
  • 8
  • 18
0

I looked into your fiddle. This is the only code you need in CSS part. It will align the elements inside the div in the middle

.form-group{ border:1px solid black; text-align:center; margin-top:50%; }

pritesh
  • 533
  • 4
  • 15