Выравнивание элемента по центру страницы

dron · September 30, 2009

Добрый день! Подскажите, пожалуйста, как выравнивать элементы полностью по центру страницы??? т.е. и по горизонтали и по вертикали! для всех браузеров!

Заранее спасибо!

psywalker · September 30, 2009

Добрый день! Подскажите, пожалуйста, как выравнивать элементы полностью по центру страницы??? т.е. и по горизонтали и по вертикали! для всех браузеров!
Заранее спасибо!

Удачи!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centr</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -255px;
				margin-top: -153px;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
						span.right { position: absolute; right: 0; top: 105px;}
						span.left { position: absolute; left: 0; top: 105px;}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			<span class="top"></span>

			<span class="cent"></span>
			<span class="bottom"></span>
		</div>
		<span class="right"></span>
		<span class="left"></span>
	</div>
</body>
</html>

dron · September 30, 2009

ниче не понятно... ваш пример центрирует сразу 5 элементов. удаляю все не нужное и пытаюсь вывести всего один элемент, у вас это span class="cent". По центру экрана он не выводится!

	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -255px;
				margin-top: -153px;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			 <span class="cent"></span>
		</div>
	</div>
</body>

psywalker · September 30, 2009

ниче не понятно... ваш пример центрирует сразу 5 элементов. удаляю все не нужное и пытаюсь вывести всего один элемент, у вас это span class="cent". По центру экрана он не выводится!

	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -255px;
				margin-top: -153px;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			 <span class="cent"></span>
		</div>
	</div>
</body>

Во первых это пример для наглядности, во вторых если уж на то пошло, надо центрировать не span, а div.wrap, вот он то как раз и отцентрирован! Задай ему бордер и увидешь

dron · September 30, 2009

т.е. в стилях остается только

*{ margin: 0; padding: 0;}

div.wrap {

width: 510px;

height: 306px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -255px;

margin-top: -153px;

}

а в html

верно?

все равно не центрируется

psywalker · September 30, 2009

т.е. в стилях остается только
*{ margin: 0; padding: 0;}
div.wrap {
width: 510px;
height: 306px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -255px;
margin-top: -153px;
}
а в html
<div class="wrap">123</div>
верно?
все равно не центрируется

Хватит прикалываться дружище, вот этот код работает начиная с ИЕ5

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centr</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -255px;
				margin-top: -153px;
				border: 1px solid #000;

			}

	</style>
</head>

<body>
	<div class="wrap"></div>
</body>
</html>

Блок центрируется ровно по середине экрана

dron · September 30, 2009

я в хроме смотрел. да, вот теперь вижу, что центрируется. спасибо! только вот у меня размер элемента, а точнее картинки 755х520. скажи, вот эти цифры margin как высчитываются???

psywalker · September 30, 2009

я в хроме смотрел. да, вот теперь вижу, что центрируется. спасибо! только вот у меня размер элемента, а точнее картинки 755х520. скажи, вот эти цифры margin как высчитываются???

Вообще бы мог и сам догадаться, лень посчитать?

			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;

				margin-left: -377px;
				margin-top: -260px;

				border: 1px solid #000;
			}

dron · September 30, 2009

огромное спасибо!

аааааа! там указывается половина от width! теперь понял! еще раз спасибо!

psywalker · September 30, 2009

огромное спасибо!
аааааа! там указывается половина от width! теперь понял! еще раз спасибо!

пожалуйста

mishka · September 30, 2009

Кхе, кхе...

А если ширина блока фиксированная то почему бы для горизонтального выравнивания не применить margin:0 auto; тогда при уменьшении размера страницы выравниваемый блок не уедет за левую границу браузера...

psywalker · October 1, 2009

Кхе, кхе...
А если ширина блока фиксированная то почему бы для горизонтального выравнивания не применить margin:0 auto; тогда при уменьшении размера страницы выравниваемый блок не уедет за левую границу браузера...

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

p.s. - и не забудь сюда заглянуть: http://forum.htmlbook.ru/index.php?showtop...mp;#entry116098

Edited October 1, 2009 by psywalker

Sign In

Выравнивание элемента по центру страницы

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information