Javascript-форум - Выравнивание по вертикали дива

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)

ansi_str,
Самое простое воткнуть в таблицу с прозрачным фоном и бордерами

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<body>
<table style="position:fixed;width:100%;height:100%"><tr valign=center align=center><td><div style="background-color:red;width:400px;height:250px"></div></td></tr></table>
</body>
</html>

Цитата:

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

position:absolute;top:50%;
margin-top:-высота блока в px;

Туфта! И что произойдет?

Нужно

margin-top:-(1/2 * высота блока);

Цитата:

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

Самое простое воткнуть в таблицу с прозрачным фоном и бордерами

редкостный говнокод.

Вот вам пару вариантов юзайте последний уже описывали выше.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8"/>
    <title>тест</title>
	<style>
		[class^=over]{
			width:200px;
			height:200px;
			background:green;
			border:1px solid red;
		}
		[class^=over] div{
			width:50px;
			height:50px;
			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>

Цитата:

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

Seva1986

:lol: Да Ваш значительно Оптимальнее!

Цитата:

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

Да Ваш значительно Оптимальнее!

Если ваши логические способности настолько слабы чтобы увидеть что у меня показаны 4 варианта а не один, и каждый из них правильнее короче и что не мало важно мои варианты валидны, то можете продолжать смеяться. Научитесь на критику реагировать, вы действительно редкостный говно код написали! :lol:

Seva1986,
1. Ваша логика Оч задириста и не тактична
Второе, Выше приведенный код в посте 12, я уже постил в теме, он мну не интересен
В третьих - у данного метода есть траблы в Ие при масштабировании страницы,
Ваш код в ИЕ=> http://uploads.ru/?v=WVNep.png
В четвертых - подразумевайте, что есть люди профессионально занимающимися некоторыми фишками, и что очевидная на первый взгляд ерунда для Вас - может являться опытом долгой практики!

Deff,

1 повторю научитесь реагировать на критику, то что вы написали это очень устаревшее решение из эпох 6-7 осла а может и раньше. сейчас это попросту говнокод.

2 я про это сам сказал

Цитата:

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

последний уже описывали выше

3 я не смотрел в каком ie траблы хотя догадываюсь в 7 и ниже, во первых в нигде никто про старых ослов не писал в задаче, во вторых я скинул 4 примера выбирайте тот который работает, а для осла через условные, и кстати кому он нужен это 7 осёл уже? на статистику посмотрите. заглушку на него ставте и всё.

4 как бы это странно не звучало я сам человек

Цитата:

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

профессионально занимающимися некоторыми фишками

и что ещё страннее я эти решения не за секунду от фанаря написал, а это как раз моя долгая практика, хотя я и не претендую что я первый автор нас таких авторов параллельно находящих разные решения немерено!

P.S. по сравнению с некоторыми другими вещами эта задача действительно ерунда;)

Цитата:

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

Ваш код в ИЕ=> http://uploads.ru/?v=WVNep.png

а ну как я и говорил 7 осёл

Seva1986,
В 8 тож криво
Кому нужны "Новые красивые решения" -не добавляющие функциональности ? 15% Пользователей Сайта - отсечено
Я бы Вас уволил