Центрирование текста (по вертикали) внутри текстового поля с помощью CSS - PullRequest
6 голосов
/ 08 августа 2010

В настоящее время я работаю с текстовым полем с фоном.Мне было интересно, можно ли центрировать текст (вертикально) внутри текстового поля.

важно : он идеально центрирован в Firefox.Только IE это пишет слишком высоко по какой-то причине.Я пробовал высоту строки, отступы и поля.Ничего не работаетЕсть идеи?

РЕДАКТИРОВАТЬ: Это мой текущий CSS.Я должен сказать, что я пробовал метод margin-top, и он не работал для меня.Кроме того, как я уже говорил, это только для IE.У меня есть специфичные для IE таблицы стилей, поэтому не беспокойтесь.

.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }

Для IE у меня есть следующее:

.textValue { font-size: 14px; }

как для HTML:

            <tr>
                <td><label for="name">name</label></td>
                <td><input type="text" name="name" id="name" class="textValue" value="" /></td>
            </tr>

СпасибоАмит

Ответы [ 3 ]

7 голосов
/ 08 августа 2010

Интересно, как вы можете выровнять текст в текстовом поле, но, как вы говорите, вот предложение:

Для идиота IE, вы можете использовать этот специальный взлом IE:

margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */

Возможно, вы захотите попробовать другие подобные свойства, если хотите, вместо margin-top.

2 голосов
/ 14 января 2011

Я знаю, что это немного устарело, но я столкнулся с той же проблемой. Приведенное здесь решение не помогло мне, что казалось странным. В моем случае это была высота строки, которая была установлена ​​на «1em». Решением было изменение высоты строки до значения, которое напоминало бы высоту текстового поля, а не размер шрифта, которое оно содержало Это также продолжает работать, как и ожидалось в Firefox и т. Д.

2 голосов
/ 08 августа 2010

Вы пробовали?:

input {vertical-align: middle;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...