inline-block по центру

@Hagrael · Регистрация: 07.01.2010

Author24 — интернет-сервис помощи студентам

Что делать, если надо создать что-то типа этого:
cтрока...блок...строка
квадрат - это блок. И надо чтобы он выравнивался по центру в строке, а не по низу, как это получается обычно. Как такое осуществить?

Vovan-VE · 20.09.2010, 18:45

Сообщение от Hagrael

чтобы он выравнивался по центру в строке

CSS

1	блок {vertical-align:middle;}

@Hagrael · 20.09.2010, 19:08 **[ТС]**

Vovan-VE, нет, мне надо, чтобы не содержимое блока, а сам блок выровнялся по центру.

HTML5

1	Hello<div style="display: inline-block;">Hello<br>Hello<br>Hello</div>Hello

Получится так, что 2 верхних Hello будут выше, чем основная строка. И этого мне надо избежать.

Добавлено через 1 минуту
Это

HTML5

<table cellspacing="0" cellpadding="0">
<tr><td valign="middle">
Hello<div style="display: inline-block;">Hello<br>Hello<br>Hello</div>
</td></tr>
</table>

тоже не помогает.

Vovan-VE · 20.09.2010, 19:15

Сообщение от Hagrael

надо, чтобы не содержимое блока, а сам блок выровнялся по центру.

Так оно это и делает. О_о

HTML5

1	Hello<div>Hello<br>Hello<br>Hello</div>Hello

CSS

1	div {display: inline-block; vertical-align:middle; border:#ccc solid 1px;}

@Hagrael · 20.09.2010, 19:45 **[ТС]**

Vovan-VE, o_O
Не ожидал =)
Знач вот почему в блоках нету внутреннего центрирования... Свойство vertical-align у них действует по-другому. Оно указывает, как тексту обтекать элемент, да? И действует, как я понял, только с inline-block'ами.

Vovan-VE · 20.09.2010, 19:51

Для inline оно выравнивает текст внутри строки (внутри line-height).
Для inline-block оно выравнивает блок внутри строки.
Для table-cell оно выравнивает контент внутри.
Всё.

Сообщение от CSS 2.1

'vertical-align'
Applies to: inline-level and 'table-cell' elements

@Hagrael · 20.09.2010, 20:53 **[ТС]**

Vovan-VE, спасибо, разъяснил =)

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
		1
	inline-block по центру 20.09.2010, 18:42. Показов 4902. Ответов 6 Метки нет (Все метки) Что делать, если надо создать что-то типа этого: cтрока...блок...строка квадрат - это блок. И надо чтобы он выравнивался по центру в строке, а не по низу, как это получается обычно. Как такое осуществить? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	20.09.2010, 19:45 [ТС]	5
	Vovan-VE, o_O Не ожидал =) Знач вот почему в блоках нету внутреннего центрирования... Свойство vertical-align у них действует по-другому. Оно указывает, как тексту обтекать элемент, да? И действует, как я понял, только с inline-block'ами. 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	20.09.2010, 19:51	6
	Для inline оно выравнивает текст внутри строки (внутри line-height). Для inline-block оно выравнивает блок внутри строки. Для table-cell оно выравнивает контент внутри. Всё. Сообщение от CSS 2.1 'vertical-align' Applies to: inline-level and 'table-cell' elements 2

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	20.09.2010, 20:53 [ТС]	7
	Vovan-VE, спасибо, разъяснил =) 0