text-align: center的问题

Question

<div class="line">
<select name="area">
<option value="-1">医院地区</option>
<option value="1">东城区</option>
<option value="2">西城区</option>
</select>
</div>

.line {

text-align: center;

}

没有设置text-align: center;的时候

设置text-align: center;的时候

text-align不是能让元素中的文本居中的吗？？？怎么让select居中了呢？求解

Answer 1

select 元素是行内元素，相当与文字，文字也属于行内元素，所以text-align:center会让select也居中

Answer 2

这样行吗?

select {
text-align: center;
  text-align-last: center;
}
option {
text-align: center;
}

不然只能自己实现下拉列表了