Выровнять текст по центру в jQuery Mobile Button? - PullRequest
2 голосов
/ 22 ноября 2011

Я пытаюсь уменьшить высоту мобильной кнопки jQuery для лучшего соответствия в виде списка, но не могу правильно выстроить текст. Вот моя реализация до сих пор:

.listDelBtn .ui-btn-text {
    margin: -5px -15px -5px -15px;
}

<a class="listDelBtn" data-role="button" data-theme="b" style="float: right; width: 75px; line-height: 11px; margin-top: 6px; z-index: 12; padding: 0 0px 0 0px;">delete</a>

стилизованные поля влияют на ширину кнопки, чтобы придать ей более короткую длину, однако значения верхнего и нижнего полей не влияют, независимо от используемых значений. Я также безуспешно пытался использовать различные отступы, рост и другие значения. Высота строки также была единственным встроенным стилем, который влиял на высоту кнопки, но текст внутри был смещен. Попытка использовать версию 1.0b1 + jQuery Mobile, кстати.

Вот изображение результирующей кнопки для справки: button

Ответы [ 3 ]

6 голосов
/ 22 ноября 2011

Вы можете дать height своему button, а затем присвоить ему line-height.

Например

.listDelBtn{
 height:30px;
 line-height:30px;
}

Проверьте этот пример http://jsfiddle.net/EQash/

0 голосов
/ 22 ноября 2011

Стиль Inline margin-top имеет приоритет над стилями, определенными в классе CSS. Вот почему CSS-значения не имеют никакого эффекта. Решение состоит в том, чтобы добавить

margin-top: -5px !important;

к вашему CSS, если вы хотите, чтобы отрицательное верхнее поле вступило в силу.

0 голосов
/ 22 ноября 2011

@ Inator Я думаю, что вертикальное выравнивание по середине работает только для элементов таблицы, а не для других случаев.

В этом случае в классе вы применяете к кнопке:

Набор: дисплей: таблица-ячейка

и выравнивание по вертикали: среднее

и, возможно, создайте внешний элемент скажем div и установите его отображение в таблицу как дисплей: таблица и выравнивание по вертикали: среднее

Надеюсь, это сработает

...