如何水平居中<select>元素

Question

我有以下代码： ＆LT; DIV＆GT;     ＆LT;选择＆GT; ...＆LT; /选择＆GT;     ＆LT; p为H. FOO＆LT; / p为H. ＆LT; / DIV＆GT; 以下拉列表为中心的最简洁方法是什么？＆lt; select＆gt;但保持＆lt; p＆gt;左对齐？

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%);
}

<强> DEMO HERE

Answer 3

这很简单。让你选择显示块并给它自动边距。

Demo

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