центрирование div

theo_ · September 1, 2009

Здравствуйте!

Как можно отцентровать div, если его ширина заранее неизвестна.

Т.е. есть такой вот html-код:

<div id="header">
<div class="menu_container">
  <ul class="menu">
	<li class="menu_item">пункт 1</li>
	<li class="menu_item">пункт 2</li>
	<li class="menu_item">пункт 3</li>
  </ul>
</div>
</div>

Пункты меню выводятся динамически, т.е. сколько их будет заранее неизвестно.

Что прописать в css для header и menu_container, чтобы этот самый menu_container центрировался

такой css не помогает:

#header {
  text-align: center;
}
.menu_container {
  margin: 0 auto;
}

VJiK · September 1, 2009

#header { text-align: center; } - это не нужно.

А для .menu_container задайте ширину

theo_ · September 1, 2009

для IE 6 это нужно, насколько я помню

А если не задавть width, с помощью css никак не получится?

mishka · September 1, 2009

для IE 6 это нужно, насколько я помню

Вы неправильно помните.

У вас есть хедер. Ему

оверфлов хиддет

текст-алигн центер (вот тут я немогу понять почему без этой строки неработает ff2, может кто подскажет?)

В нем блок с

флоат лефт(для того чтобы блок стал по ширине содержимого)

позишн релейтив

лефт +50% (так вы его двигаете на половину ширины родителя вправо)

Внутри еще один блок. Ему

флоат лефт(для того чтобы блок стал по ширине содержимого)

позишн релейтив

лефт -50% (так вы его двигаете на половину ширины родителя влево)

Я не пишу код. Потому что если вы поймете работу этого примера то небудете тупо копипастить из старых работ в новую, а будете понимать что происходит и поэтому сами будете в состоянии это сделать без подсказок

Правда это я привел сложный пример. Все от дизайна зависит.

Если вы <li> будете ровнять с помощью display:inline; то конечно text-align:center все выровняет.

А если у вас лишки флотнутые - воспользуйтесь примером выше.

Подсказка <ul> это тоже блочный елемент который я описал как "Внутри еще один блок"

Edited September 1, 2009 by mishka2

theo_ · September 1, 2009

mishka2, не понятно пока что, но можно ли чуток пояснить

html

<div id="header">
  <div class="left"></div>
  <div class="menu_container">
	<ul class="menu">
	  <li class="menu_item">пункт 1</li>
	  <li class="menu_item">пункт 2</li>
	  <li class="menu_item">пункт 3</li>
	</ul>
  </div>
  <div class="right"></div>
</div>

css

#header {
  text-align: center;
  overflow: hidden;
}
.left {
  position: relative;
  float: left;
  left: -50%;
}

.right {
  position: relative;
  float: left;
  left: 50%;
}

.menu_container {
  margin: 0 auto;
  float: left;
}

с таким кодом не работает, что здесь не так?

mishka · September 1, 2009

<div id="header">
<div class="menu_container">
  <ul class="menu">
	<li class="menu_item">пункт 1</li>
	<li class="menu_item">пункт 2</li>
	<li class="menu_item">пункт 3</li>
  </ul>
</div>
</div>

#header{
	position:relative;
	overflow:hidden;
	width:100%;
	text-align:center;
}
.menu_container{
	position:relative;
	left:+50%;
	float:left;
}
.menu{
	position:relative;
	left:-50%;
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}
.menu li{
	float:left;
}

Edited September 1, 2009 by mishka2

VJiK · September 1, 2009

Как вариант можно использовать такую конструкцию:

<div id="header">
	<table cellpadding="0" cellspacing="0" class="menu_container"><tr><td>
		<ul class="menu">
			<li class="menu_item">пункт 1</li>
			<li class="menu_item">пункт 2</li>
			<li class="menu_item">пункт 3</li>
		</ul>
	</td></tr></table>
</div>

стиль простой: .menu_container { margin: 0 auto; }

psywalker · September 1, 2009

<div id="header">
	<table cellpadding="0" cellspacing="0" class="menu_container"><tr><td>
		<ul class="menu">
			<li class="menu_item">пункт 1</li>
			<li class="menu_item">пункт 2</li>
			<li class="menu_item">пункт 3</li>
		</ul>
	</td></tr></table>
</div>

стиль простой: .menu_container { margin: 0 auto; }

Если уж таблица, тогда можно вообще так:

<tr>

</tr>

</table>

VJiK · September 1, 2009

<table style="margin: 0 auto;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Это тоже самое

По поводу этого варианта:

<!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="en" lang="en">
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />

    <style type="text/css">
        * { margin: 0;padding: 0;}
        div {
            position:relative;
            float:left;
            left:50%;
        }
        ul {
            position:relative;
            float: left;
            left:-50%;
        }
        ul li { float: left;}


    </style>
</head>
<body>
<div>

  <ul class="menu">
    <li class="menu_item">пункт 1</li>
    <li class="menu_item">пункт 2</li>
    <li class="menu_item">пункт 3</li>
  </ul>

</div>

</body>
</html>

Лишний див-то убирается, но надо будет ставить дивы вверху и внизу с clear: both;

mishka · September 1, 2009

Можна... но менюха его стоит именно в хедере. И далеко не единственный елемент на сайте. И див тоже скорее всего на сайте будет не один, а вы их все вправо сдвините. Ну а списку забыли убрать лист-стайл.

И код хтмл дал автор

Да еще и все дивы на сайте флотнуть - это круто даже не представляю что с ним станет

Edited September 1, 2009 by mishka2

mishka · September 1, 2009

ТС ну ты хоть скажи помогли тебе наши старания и советы или нет?

theo_ · September 1, 2009

Огромнейшее спасибо всем! и за советы, и за старания Все получилось, и самое главное я понял суть сего явления

psywalker · September 1, 2009

Огромнейшее спасибо всем! и за советы, и за старания Все получилось, и самое главное я понял суть сего явления

Вот это другое дело, молодец! дуй учиться

Sign In

центрирование div

Question

Link to comment

Share on other sites

12 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information