VPF::checkbox отцентрирован по вертикали

Guedda

Дата 13.2.2013, 14:49 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78

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

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

--------------------

Ll 2

CruorVult

Дата 13.2.2013, 15:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

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

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

Это сообщение отредактировал(а) CruorVult - 13.2.2013, 15:28

Guedda

Дата 13.2.2013, 15:51 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78

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

)

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

Код


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

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

--------------------

Ll 2

CruorVult

Дата 13.2.2013, 16:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

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

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

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

Это сообщение отредактировал(а) CruorVult - 13.2.2013, 17:06

Guedda

Дата 13.2.2013, 17:11 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78

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

--------------------

Ll 2

Aliance

Дата 13.2.2013, 17:27 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Вот так: 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%;
}

Это сообщение отредактировал(а) Aliance - 13.2.2013, 17:28

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 13.2.2013, 17:36 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

CruorVult

Дата 13.2.2013, 17:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

ksnk, шаман smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »