text-align not working on select control on chrome

Question

I have capsuled my problem to this. The centering works in firefox but not in chrome. Any ideas?

.center_align
{
  text-align: center;
  width: 100%;
}

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <select class="form-control center_align">
        <option value="0">   - Välj -</option>
        <option value="1" selected="">   Kategorier valda</option>
     </select>

</body>
</html>

Ehsan · Accepted Answer · 2017-07-20T13:27:12.757

Use of text-align-last:center; :

.center_align {
  text-align:center;
  width: 100%;
  text-align-last:center;<----------Added
}

.center_align {
  text-align:center;
  width: 100%;
  text-align-last:center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control center_align">
  <option value="0">   - Välj -</option>
  <option value="1" selected="">   Kategorier valda</option>
</select>

text-align not working on select control on chrome

1 Answers1