JQuery мобильный: вертикально центр две строки текста кнопки

Question

У меня есть мобильные кнопки JQuery с 2 строкой текста со следующими правилами CSS:

.ui-btn-text { 
    word-wrap: break-word !important; 
    white-space: normal !important; 
} 

JQuery делает пролет с классом: ui-btn-inner ui-btn-corner-all вокруг текста.

Я хочу, чтобы этот элемент был вертикально центрирован.

Когда я использую vertical-align, он не действует. line-height не работает, потому что мой текст может иметь две строки.

Есть ли у кого-нибудь идеи, как я могу вертикально центрировать мой текст в кнопке?

Answer 1

элементами инлайн (как <SPAN>) можно использовать только line-height поддельное вертикальное выравнивание. Так что если это не сработает для вас в этой ситуации из-за нескольких строк, переключитесь на таблицы/ячейки (<TD>). Но если jQuery mobile генерирует внутренние теги span, это не сработает для вас.

Вы также можете вертикально выровнять обертку <TD> и сделать кнопку меньшей высоты, чтобы текст сам по себе не нуждался в вертикальном центрировании. Но это означает визуальные изменения дизайна.

Спецификация HTML не предназначена для такого типа макета. Поэтому, если вышеупомянутые решения не будут работать в вашей ситуации, вы перестанете пытаться динамически выравнивать текст внутри встроенного элемента, по крайней мере, с помощью решений HTML/CSS.

Не-CSS-решения включают в себя предварительно обработанные изображения, корректировки Javascript после привязки данных, HTML5 <CANVAS> или изображения SVG и другие расширенные обходные пути, которые обычно не стоят хлопот, если все, что вам нужно, это текст с вертикальной ориентацией.

Answer 2

Вы должны сделать контейнера Div

position: relative; 

И дать ему высоту. Затем сделайте внутренний div

position: absolute; margin: 0px auto; 

Чтобы сделать его вертикально центрированным в контейнере!

=============
Оригинальный ответ:

text-align: center; 

Если сделать трюк для горизонтального центрирования.

Answer 3

Попытки с верхними нижними padding: 10px 0;

Answer 4

Я решил это, поставив текст в div с верхним краем, его не усовершенствованный центрированный теперь, когда он имеет 2 строки, но это должно быть хорошо. Thx для ваших предложений