Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Выравнивание по вертикали дива (https://javascript.ru/forum/xhtml-html-css/28538-vyravnivanie-po-vertikali-diva.html)

Deff 06.06.2012 14:25

Цитата:

Сообщение от Nanto
без заранее заданных размеров

http://hostjs-mybb2011.narod.ru/center_div.htm

Seva1986 06.06.2012 14:25

Цитата:

Сообщение от Nanto
без заранее заданных размеров

размеров чего? блока или его родителя в котором он центрируется?

Seva1986 06.06.2012 14:31

Deff,
ну харе говнокодить ламер, он не по центру. увеличь высоту хотя бы на 200 рx
:lol:

Seva1986 06.06.2012 14:35

Nanto,
вот, изменил только размеры блоков больше ничего не трогал кроме первого и последнего способа все правильно работают, если не нравяться эмуляции таблиц убери 2 способ и останеться 3 мой любимый
.over3 div{
			position:absolute;
			margin:auto;
			top:0;
			bottom:0;
			right:0;
			left:0;
		}

:victory:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8"/>
    <title>тест</title>
	<style>
		[class^=over]{
			width:400px;
			height:300px;
			background:green;
			border:1px solid red;
		}
		[class^=over] div{
			width:60px;
			height:80px;
			background:red;
		}
		.over1{
			line-height:200px;
			text-align:center;
		}
		.over1 div{
			display:inline-block;
			vertical-align:middle;
		}
		.over2{
			display:table-cell;
			vertical-align:middle;
		}
		.over2 div{
			margin:0 auto;
		}
		.over3{
			position:relative;
		}
		.over3 div{
			position:absolute;
			margin:auto;
			top:0;
			bottom:0;
			right:0;
			left:0;
		}
		.over4{
			position:relative;
		}
		.over4 div{
			position:absolute;
			margin:-25px 0 0 -25px;
			top:50%;
			left:50%;
		}
	</style>
</head>
<body>


<div class="over1">
	<div></div>
</div>
<div class="over2">
	<div></div>
</div>
<div class="over3">
	<div></div>
</div>
<div class="over4">
	<div></div>
</div>

</body>


</html>


PS и да, я крутой!

devote 06.06.2012 15:19

Цитата:

Сообщение от Seva1986
  position:absolute;

о да ты крутой, способ прям супер, абсолютная позиция нас всегда спасает, и что потом весь сайт в этом диваке запиливать? говнокод одним словом. Это на квадратике вы крутые, да еще и с абсолютной позицией. А как проект полный написать, дык без заранее известных размеров хрен что сделаете, и не надо доказывать что это не так. Навидался я тру верстальщиков с понтами как ты. Вот только чаще после таких как ты переверстывать все приходится.

Nanto 06.06.2012 15:51

Seva1986,
блока который центруется, хотя бы.

Nanto 06.06.2012 15:59

Seva1986,
"кртутой", и что ты там изменил? убери размеры у вложенного блока (заодно можешь убрать и у родительского, ради прикола ;)) - куда твоё центрирование делось?

Seva1986 06.06.2012 16:16

Цитата:

Сообщение от Nanto
убери размеры у вложенного блока (заодно можешь убрать и у родительского, ради прикола ) - куда твоё центрирование делось?

если вообще не задавать размеры то эмуляция ячейки табличной 2 вариант, если не задавать размеры только центрируемому блоку то можно ещё с line-height вариант, первый вариант.
Я показал 4 варианта для разных ситуаций, ты начал говорить
Цитата:

Сообщение от Nanto
По вертикали центруется либо через таблицы (или table-cell) - но этот вариант крайне не рекомендуется (могут вылезти уже другие баги), хотя если высота блоков не известна - это единственный вариант. Если высота известна то лучше через позиционирование и top:50%;margin-top:-x/2.

я сказал чтоб ты посмотрел на мой пост и увидел то что я уже описал тот вариант который ты предложил. что ты хочешь ещё?

Более правильные варианты это css3 но о них пока рано.

Seva1986 06.06.2012 16:28

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

И вообще причём сдесь сайт не сайт, я для особо тупых в сотый раз повторяю я показал 4 варианта если нужно сайт центрировать то через ячейку вариант, или с line-height (если размеры не известны)

Nanto 06.06.2012 16:43

О чём речь вообще???
Я к тому, что развели срач на несколько страниц - в Гугле всех забанили?
Хотя бы вот - зачем далеко ходить:
http://learn.javascript.ru/css-center

Но как писал devote, всё это идеализированные примеры - что будет с этими центрующимися блоками при переполненнии контентом, при наличии плавающих блоков и прочая...


Часовой пояс GMT +3, время: 08:00.