Question

我正试图在chrome和safari中水平和垂直居中选择框。

以下是jsfiddle - [http://jsfiddle.net/xeqLsdo6/] 1

问题是Chrome和Safari中的文本没有垂直对齐，甚至认为它在firefox中。

提前谢谢。

Answer 1

只需为两者设置行高。无需处理内联块显示，无论如何它们都是内联元素。您的小提琴的问题在于您忘记插入类表格组中的[dot]，如果您使用Boostrap，则不会包含外部CSS库。

这是一个工作小提琴 - http://jsfiddle.net/xeqLsdo6/2/

此页面是基于BS和您所需代码的工作方案。从这里开始，你可以在线高和其他东西上工作。

我真的不知道水平对齐的意思。它是关于标签和选择应该留在屏幕的中间还是选项元素应该在选择元素内居中？

除此之外，更多解释不会伤害任何人。只是在某个地方启动代码对你没有多大帮助，因为你可能会忘记事情并且解决方案变得不太可能。

＆＃13;

#state {
  display: inline;
  width: auto;
}

＆＃13;

<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>

＆＃13;

Answer 2

我看着你的小提琴。这是CSS部分中唯一需要的代码。它将在div中间对齐div中的元素

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

我试图水平和垂直居中选择框

2 个答案: