Центрирование по высоте и ширине

iillyyaa2 · May 26, 2011

есть ли решение блоками сделать такое ?

всё резиновое.

блок отцентрировать по высоте и ширине

если размеры окна меньше, он липнет к правому краю (и к верхнему)

таблицей проще некуда

<table width="100%" height="100%">
	<tr><td align="center" valign="middle">ddd</td></tr>
</table>

а как блоками ? БЕЗ ЯВЫ!

Edited May 26, 2011 by iillyyaa2

Great Rash · May 26, 2011

А зачем? Таблицами лучше и без гемора.

Quote
давайте там пофлудим про таблицы

Т.е. я сразу переношу во Флейм? В этом разделе мы обсуждаем реальные проблемы и варианты их решения, а не холивары разводим.

psywalker · May 26, 2011

On 5/26/2011 at 3:20 PM, Great Rash said:
А зачем? Таблицами лучше и без гемора.

Вот-вот.

iillyyaa2 · May 26, 2011

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

я так понимаю решения нет ?

сейчас кинули макет, там явой с задержкой меняется верхний отступ... прыгает жесть ) а им нравится... позиция, нехера менять размеры...

psywalker · May 26, 2011

Тогда делай через дисплей-тэйбл, а для ИЕ экспрешаны.

dostel1 · May 26, 2011

On 5/26/2011 at 4:01 PM, psywalker said:
Тогда делай через дисплей-тэйбл, а для ИЕ экспрешаны.

а разве можна использоать такое выравнивание для резиновой высоты родителя???

у меня не получается!!!

приведи пример плиз

Edited May 26, 2011 by dostel1

psywalker · May 26, 2011

On 5/26/2011 at 4:36 PM, dostel1 said:

On 5/26/2011 at 4:01 PM, psywalker said:
Тогда делай через дисплей-тэйбл, а для ИЕ экспрешаны.
а разве можна использоать такое выравнивание для резиновой высоты родителя???
у меня не получается!!!
приведи пример плиз

Что значит?

Quote
а разве можна использоать такое выравнивание для резиновой высоты родителя

display: table; работает так же как таблица.

iillyyaa2 · May 26, 2011

тоесть, вместо <table> сделать <div style="display: table;"> ?

Edited May 26, 2011 by iillyyaa2

dostel1 · May 26, 2011

http://cssing.org.ua/2005/07/14/vertical-align-middle/

здесь написано У нас есть div(или любой блочный элемент) с известной высотой тоесть для резины он не пашет??!!!!

может через инлайн-блок нада делать......хз

Edited May 26, 2011 by dostel1

psywalker · May 26, 2011

On 5/26/2011 at 7:49 PM, dostel1 said:
http://cssing.org.ua/2005/07/14/vertical-align-middle/
здесь написано У нас есть div(или любой блочный элемент) с известной высотой тоесть для резины он не пашет??!!!!

Кто он?

On 5/26/2011 at 6:57 PM, iillyyaa2 said:
тоесть, вместо <table> сделать <div style="display: table;"> ?

Да, а вложенному диву тейбл-целл

iillyyaa2 · May 26, 2011

On 5/26/2011 at 9:06 PM, psywalker said:
Да, а вложенному диву тейбл-целл

и чем это лучше чем просто тейбл, тр, тд ?

ведь таблица это тоже блок с ячейками...

dostel1 · May 27, 2011

если у нас будет дочерний блок тейбл-цесс один то он будет занимать всьо пространство родителя и никак его выровнять по центру внутри блока нельзя....

приведи пример плиз и закроем тему

Great Rash · May 27, 2011


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		html, body, .wrap {margin: 0; padding: 0; height: 100%;}

		.wrap {
			white-space: nowrap;
		}

		.center {
			display: inline-block;
			position: relative;
			z-index: 1;
			width: 100%;
			margin: 0 0 0 -4px;
			text-align: center;
			vertical-align: middle;
			white-space: normal;

			//display: inline;
			//zoom: 1;
		}

		.helper {
			display: inline-block;
			height: 100%;
			width: 0;
			margin: 0 0 0 -100%;
			vertical-align: middle;
			visibility: hidden;
		}
	</style>
</head>
<body>

	<div class="wrap">
		<div class="center">
			хоть тресни, а я по центру
		</div>
		<span class="helper"></span>
	</div>

</body>
</html>

Закрываю тему? ;)

psywalker · May 27, 2011

On 5/26/2011 at 11:25 PM, iillyyaa2 said:

On 5/26/2011 at 9:06 PM, psywalker said:
Да, а вложенному диву тейбл-целл
и чем это лучше чем просто тейбл, тр, тд ?
ведь таблица это тоже блок с ячейками...

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

iillyyaa2 · May 27, 2011

Internet Explorer до версии 7 включительно:

значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

ЗЫ не проверял

Great Rash · May 27, 2011


//display: inline;
//zoom: 1;

Заставляют любой элемент вести себя как инлайн-блок в ИЕ6 и ИЕ7.

iillyyaa2 · May 27, 2011

Great Rash, спасибо за реализацию , если заказчик будет настаивать на блоках, получит лишних 20 строк кода

Edited May 27, 2011 by iillyyaa2

Sign In

Центрирование по высоте и ширине

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information