Как горизонтально центрировать <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; 
}