如何水平居中<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%); 
} 

DEMO HERE

Answer 3

這是很簡單的事情。讓你選擇顯示塊並給它自動邊距。

Demo

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