Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > checkbox отцентрирован по вертикали

Автор: Guedda 13.2.2013, 14:49

добрый день.
У меня есть div динамической высоты (в зависимости от контента). Как сделать так, чтобы чекбокс был отцентрирован по-вертикали?

Заранее благодарен за ответы.

Автор: CruorVult 13.2.2013, 15:03

Не совсем понятно что нужно.
Тебе нужно чекбокс внутри div-а выровнять по центру, но о каком содержимом в диве идет речь и как оно будет влиять на чекбокс?

Или нужно чтобы чекбокс выравнивался относительно высоты текста-лебла?

Автор: Guedda 13.2.2013, 15:51

Цитата(CruorVult @ 13.2.2013, 16:03

)

Да, видимо, плохо описал.

Код


<div class="myclass">
  <input type="checkbox" />
  <span>
Здесь рандомный текст, которого может быть много.
  </span>
</div>

В итоге должно получиться приблизительно так:
user posted image

Автор: CruorVult 13.2.2013, 16:57

Как вариант http://jsfiddle.net/tXNFK/1/

Может и не самый красивый, но лучше табличного с vertical-align smile

П.С. Как же все таки webkit в этом плане круче smile

Автор: Guedda 13.2.2013, 17:11

Без абсолютного позиционирования никак? :(

Автор: Aliance 13.2.2013, 17:27

Вот так: http://jsfiddle.net/Aliance/tXNFK/2/

Код


<div class="myclass">
    <input type="checkbox" />
    <p>Здесь рандомный текст, которого может быть много.</p>
</div>

Код


.myclass {
    display: table;
}
input, p {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

Автор: ksnk 13.2.2013, 17:36

Код


.myclass {
    vertical-align:middle;
}
div.myclass > div {
    display:inline-block;
    width:150px;
    vertical-align:middle;
}

можно в фидл вставить такой css

Автор: CruorVult 13.2.2013, 17:41

ksnk, шаман smile