div по центру

OlegALL · January 9, 2011

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

Использую решение margin: 0px auto; , но оно не работает ни в Файрфлкс, ни в IE

Есть ли ещё способы?

Помогите! Спасибо

Vlad · January 9, 2011

1. Не задана ширина div

2. доктайп не указан

sigma77 · January 9, 2011

OlegALL,

Ссылку на страницу или кусок проблемного кода (всё выкладывать не нужно!).

psywalker · January 9, 2011

Здравствуйте. Задача - выровнять блок div по центру по вертикали и по горизонтали.
Использую решение margin: 0px auto; , но оно не работает ни в Файрфлкс, ни в IE
Есть ли ещё способы?
Помогите! Спасибо

Выровнять во всём окне или в отдельном блоке? Покажи скрины.

OlegALL · January 9, 2011

Заработало по горизонтали. А ка сделать выравнивание и по вертикали?

Выровнять надо относительно окна браузера

Выравнивается блок с классом main

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang = "eng">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>

<link href="index.css" rel="stylesheet" type="text/css" />


</head>

<body>

<div class="main">
<div class="sticker">
The combination of special <br> massage therapy, 
reflexology <br> without  needles  and stone 
therapy <br> relieves pain,  regains and optimizes <br>
natural  functions of the body <br> without any 
side effects.
</div>
<div class="contacts">
<a href="">Performed by certified massage therapist in <br>
Grand Rapids, Michigan. Ph (616) 550 6819</a>
</div>
</div>

</body>
</html>

css:


.main {
	position: relative;
	width: 778px;
	height: 549px;
	margin: 0px auto;
	background: url(images/main.jpg);
}

Edited January 9, 2011 by OlegALL

psywalker · January 9, 2011

<!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-top: -153px;
				margin-left: -255px;

				border: 1px solid #000;

			}
				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>

Протуберанец · January 10, 2011

					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}

А почему "height: 99px;" ? Там если поставить 100рх как раз в большой прямоугольник влезает, а так внизу три пикселя осталось.

Edited January 10, 2011 by Протуберанец

psywalker · January 10, 2011

А почему "height: 99px;" ? Там если поставить 100рх как раз в большой прямоугольник влезает, а так внизу три пикселя осталось.

Да это я торопился наверное. Ерунда. <_<

Протуберанец · January 10, 2011

Да это я торопился наверное. Ерунда.

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

psywalker · January 10, 2011

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

Ага, опечатка

OlegALL · January 10, 2011

Извините, эти коды к моему вопросу относятся?

psywalker · January 10, 2011

Извините, эти коды к моему вопросу относятся?

Да, ты разве не видишь, что блок выровнен по центру?

Sign In

div по центру

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