Показать сообщение отдельно
  #34 (permalink)  
Старый 06.06.2012, 14:35
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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


<!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 и да, я крутой!

Последний раз редактировалось Seva1986, 06.06.2012 в 14:41.
Ответить с цитированием