Как выровнять по цетру вложенный div? - HTML и CSS

valerka92 · 05.09.2012, 10:36

Добрый день, несколько раз сталкивался с такой проблемой
Есть div я его центрирую по центру потом внутри этого diva есть еще 1 div
как можно центировать 2-й div внутри другого.?
Вот пример

<div style="width: 960px; margin: 0 auto;">
<div style="?">
</div>
</div>

как отцентрировать вложеный блок внутри 1 блока??
есть написать во вложенном блоке margin: 0 auto; то не срабатывает

Naive · 05.09.2012, 11:19

нужно задать ширину

dann.ftk · 05.09.2012, 15:32

Код:

<html>
<head>
	<title> Hello, world! </title>
</head>
<body>
	<div style="width: 200px;"><div align="center"> Hello, world! </div></div>
</body>
</html>

Naive · 06.09.2012, 12:23

Цитата:

Сообщение от dann.ftk

Код:

<html>
<head>
	<title> Hello, world! </title>
</head>
<body>
	<div style="width: 200px;"><div align="center"> Hello, world! </div></div>
</body>
</html>

Так спозиционируется только надпись, а блок будет во всю ширину.
И таки да, атрибут align больше не используется и не проходит валидацию с современными доктайпами

dann.ftk · 09.09.2012, 00:31

Код:

<html>
    <head>
      <title>Hello, world</title>
      <style rel="stylesheet" type="text/css">
      .parent{
      	background-color: green;
      	width: 200px;
      }
      .child{
      	width: 168px;
      	background-color: red;
      }
      </style>
      <script type="text/javascript">
      	function centerChildDiv(){
      		var parent_width = document.getElementsByClassName('parent')[0].offsetWidth;
      		var child_element = document.getElementsByClassName('child')[0];
      		var child_width = child_element.offsetWidth;

      		if (child_width < parent_width){
      			var difference = parent_width-child_width;
      			var indent = difference / 2;
      			child_element.setAttribute("style", "margin-left: " + indent.toString())
      		}
      		return;
      	}
      	window.onload=centerChildDiv;
      </script>
    </head>
    <body>
       <div class="parent">
       		<div class="child">&nbsp</div>
       </div>
    </body>
 </html>

можно немного изменить установку аттрибута:

Код:

child_element.setAttribute("style", "margin-left: " + indent.toString() + "; margin-right: " + indent.toString());

Naive · 09.09.2012, 08:21

Вы гвозди забиваете микроскопом

dann.ftk · 09.09.2012, 11:07

тогда жду предложений от тебя

Stilet · 09.09.2012, 12:17

Цитата:

И таки да, атрибут align больше не используется и не проходит валидацию с современными доктайпами

Почему? Устарел?

Naive · 10.09.2012, 09:02

Цитата:

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

Почему? Устарел?

да, веб-верстка движется в сторону MVC:
html для model,
css для view
js для controller.
Стили оформления из html уже убрали (бордеры, цвета, размеры, выравнивания). Современные стандарты убирают анимацию из js в css (transition). В идеале js должен работать только над данными, HTML только предоставлять эти данные, css - управлять красивостями страницы. Воть.

alesja92 · 10.09.2012, 19:39

а если у основного блока написать display:table-cell;
а у внутреннего уже делать text-align:center, vertical-align:middle ?

05.09.2012, 10:36	#1
valerka92 Форумчанин Регистрация: 24.04.2010 Сообщений: 179	Как выровнять по цетру вложенный div? Добрый день, несколько раз сталкивался с такой проблемой Есть div я его центрирую по центру потом внутри этого diva есть еще 1 div как можно центировать 2-й div внутри другого.? Вот пример <div style="width: 960px; margin: 0 auto;"> <div style="?"> </div> </div> как отцентрировать вложеный блок внутри 1 блока?? есть написать во вложенном блоке margin: 0 auto; то не срабатывает NADO IZUCHIT C++

05.09.2012, 11:19	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	нужно задать ширину Alar, верни репу!

05.09.2012, 15:32	#3
dann.ftk http://resumup.com Регистрация: 18.12.2011 Сообщений: 9	Код: `<html> <head> <title> Hello, world! </title> </head> <body> <div style="width: 200px;"><div align="center"> Hello, world! </div></div> </body> </html>`

09.09.2012, 08:21	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Вы гвозди забиваете микроскопом Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как выровнять сайт по центру	Yura111	HTML и CSS	4	05.05.2012 21:42
Как выровнять изображение в CSS по центру?	VasyOK{!}	HTML и CSS	8	02.03.2012 14:34
Как выровнять?(	jasik1995	HTML и CSS	1	13.12.2011 16:54
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Как отменить прозрачность div в прозрачном div	zeharon	HTML и CSS	0	24.07.2010 16:56

09.09.2012, 11:07	#7
dann.ftk http://resumup.com Регистрация: 18.12.2011 Сообщений: 9	тогда жду предложений от тебя

10.09.2012, 19:39	#10
alesja92 Регистрация: 30.08.2012 Сообщений: 6	а если у основного блока написать display:table-cell; а у внутреннего уже делать text-align:center, vertical-align:middle ?