Как выровнять селект по центру на мобилках?

Question

[Anton]

Есть селект и никак не удается выровнять его по центру на мобилке, хотя на десктопе все нормально.

select {
display: block;
        height: 100%;
        padding-left: 0;
        font-family: $f-medium;
        font-size: 26px;
        font-weight: 500;
        text-align: center;
        text-align: -webkit-center;
        border: 1px solid red !important;

        text-align-last: center;
        -moz-text-align-last: center;
        appearance: none;
}

Comments

[CoyoteSS]

position: relative;
left: 50%;
transform: translateX(-50%);

Готово

[Anton]

Мне не нужно сам селект выравнивать по центру,, он и так по центру, но вот текст в нем на мобилке ведет себя не так как на десктопе, он по левому краю выравнивается.

Answer 1

[BandFourse]

Поробуй position: absolute;
left: 30px;

Comments

[Anton]

Эту всего лишь сдвинет селект на 30пк влево и все, но не выровнит текст по центру.

[xonar]

Anton, Попробуйте флексом.

[Anton]

Тот же результат, пробовал уже.

[BandFourse]

Anton, тогда попробуй padding: 0;
или padding-right: 0;

[Anton]

BandFourse, то же пробовал, тоже самое

[strelok011]

Для начала надо смотреть на стили у оборачивающего контейнера. Если там используется флекс, text-align работать не сможет, и надо разбираться со стилями в условиях флекса, решать на уровне родителя, align-items к примеру.

[Anton]

strelok011, Дело в том что селект сам по центру стоит с ним все ок, но текст внутри не выравнивается по центру ни каким образом - это происходит только на IOS.

[strelok011]

Anton прошу прощения, не верно понял задачу. Селект - это нативный элемент формы, который рендрится в разных браузерах так, как захотели разработчики, с кучей ограничений. Для следования пиксель-перфект верстке требуется заместить такой селектор на кастомный, в интернете их оч много. Ну, или забить :)
Такая же беда с полем ввода для загрузки файла, кстати. Только еще похуже.

Answer 2

[alex-1917]

а так?
text-align-last: center; text-align: center;

или так?

select { 
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}