Выравнивание метки с фоновым изображением - PullRequest
Новая
       18

Выравнивание метки с фоновым изображением

2 голосов
/ 04 августа 2011

Я создал флажок, состоящий из элемента div с фоном изображения флажка и меткой.

Html: 

<div class="checkbox checked" ></div>
<label class="label">Some text</label>

и css: 

.checkbox
{
    height: 16px;
    width: 16px;
    float:left;
    background: url(http://cdn1.iconfinder.com/data/icons/uidesignicons/checkbox_yes.png) no-repeat 0px 0px;
}

Проблема в том, что метка не выровнена по изображению, она расположена немного ниже базовой линииизображение Div, и это выглядит некрасиво.Вы можете увидеть его jsfiddle здесь: http://jsfiddle.net/muzzzy/3hUGV/5/

Как я могу их выровнять, учитывая, что я не могу указать абсолютные значения для отступа или высоты строки, потому что это действительно часть плагина javascriptэто преобразует обычные флажки, так что метки могут быть разных размеров шрифта.

ОБНОВЛЕНИЕ: я также включаю изображение того, как это выглядит сейчас:

enter image description here

Я бы хотел, чтобы текст располагался по центру по центру изображения

Ответы [ 3 ]

4 голосов
/ 04 августа 2011

Если вам не нужны старые браузеры, отбросьте float: left и попробуйте использовать display: inline-block; в div.checkbox.После этого поиграйте с атрибутом вертикального выравнивания.

Затем сделайте кросс-браузер, потому что для некоторых из нас это уже выглядит нормально!

Вот пример из жизни: http://jsfiddle.net/karameloso/hQ2uK/

1 голос
/ 04 августа 2011

Вам лучше заменить div.checkbox на span, а затем установить span на display:inline-block. Таким образом, вы можете использовать vertical-align:middle на элементах для их центрирования (только в редких случаях используется вертикальное выравнивание!)

JS Fiddle: http://jsfiddle.net/3hUGV/34/

0 голосов
/ 04 августа 2011

Ну, для того, что вы спрашиваете, попробуйте таблицу: http://jsfiddle.net/3rRb6/

(Если, конечно, вы не один из тех omg-im-not-using-a-table-for-layout! @ $ #? @ $!?! тип людей)

...