如何水平居中元素<select>

Question

我有以下代码：

<div>
    <select>...</select>
    <p>foo</p>
</div>

将下拉 <select>的最干净的方法是什么，但保持 <p>对齐？

Answer 1

<select>是内联级元素，要中心您可以将容器元素设置为text-align:center。

通过应用以上规则，<p>内部也将被居中的文本，因为它从父属继承，您可以使用text-align:left将其重置。<p>本身实际上仍然保持对齐，因为它是块级元素。

select, p {
    border: 1px solid red;
}
div {
    text-align: center;
}
p {
    text-align: left;
}

<div>
    <select>...</select>
    <p>foo</p>
</div>

或者，您可以将<select>从内联更改为块级别display:block或table等，然后用margin:auto本身中心。

select, p {
    border: 1px solid red;
}
select {
    display: block;
    margin: auto;
}

<div>
    <select>...</select>
    <p>foo</p>
</div>

Answer 2

尝试此

select{
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}

演示此处

Answer 3

这很简单。让您选择显示块并给它自动保证金。

演示

div select {
   display: block;
   margin: auto;
}