выровнять текст внутри выбора ввода

у меня есть простая форма с css, и есть выбор с этим стилем:

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
}

и текст внутри этого выбора всегда выравнивается по верхнему и левому краю; есть ли способ, которым я могу переместить этот текст?

Удивительно, что IE7, IE8 и IE9 устанавливают этот центр текста вертикально.


forms input html css
person armandfp    schedule 30.11.2011    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вам просто нужно добавить отступы к стилю, а затем соответствующим образом настроить высоту и ширину.

e.g.

padding: 5px;

Теперь высота равна исходной высоте — 10 пикселей (отступы по 5 пикселей сверху и снизу). Ширина теперь равна исходной ширине — 10 пикселей (отступы по 5 пикселей слева и справа).

Также, как предложил @peduarte, вы можете добавить line-height, что на самом деле дает такие же результаты, как заполнение.

person Tim B James    schedule 30.11.2011
comment
Просто чтобы добавить к этому, высота строки также может быть полезна, чтобы сделать эту высоту кросс-браузерной. - person peduarte; 30.11.2011
comment
это просто было неожиданностью, потому что я поставил отступ, например @TimBJames, и это работает, но без уменьшения высоты и ширины: изображение - person armandfp; 30.11.2011

arrow_upward
0
arrow_downward

Добавьте это свойство в CSS

text-align:center
person coolguy    schedule 30.11.2011
comment
я не хочу делать центр, я просто хочу что-то вроде padding: 3px 0 0 5px; только для текста внутри выбора, а не для выбора. - person armandfp; 30.11.2011

arrow_upward
0
arrow_downward

попробуйте это, может вам поможет

.mysub_item select {
    height: 29px;
    width: 142px;
    background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
    border: 0;
    font-size: 12px;
    font-weight: bold;
    color: #4B4B4D;
    vertical-align:middle;
    line-height:1.8;
}
person Sonal Khunt    schedule 30.11.2011
comment
просто поместите часть html для этой таблицы стилей, я проверю, скажу вам, в чем проблема - person Sonal Khunt; 30.11.2011

arrow_upward
0
arrow_downward

Изменить высоту на height: 22px;

person Sonal Khunt    schedule 30.11.2011