Выравнивание по центру

Goldie · December 15, 2008

День добрый.

Не могу понять почему не работает свойство в идентификаторе

DIV #container {text-aline: center;}

или то же самое свойство в Body {text-aline: center;}

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

Заранее благодарю за помощ.

Сам код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Трехколоночный макет на CSS с одинаковой высотой колонок</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0;}
body{font: 76% arial,sans-serif;}

p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}

div#container{width: 1000px; position: relative; text-aline: center;}

div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF;}

div#footer p{margin:0;padding:5px 10px;}

div#wrapper {
			 float:left;
			 width:100%;
			 }

div#content {
			  margin: 0 0 0 0;
 		  border-left: 190px #B9CAFF solid;
 		  border-right: 400px #FF8539 solid;
 		  border-bottom: 1px #333 solid;
			}


div#navigation {
				float:left;
				width:190px;
				margin-left:-100%
				}


div#extra	   {
				 float:left;
				 width:400px;
				 margin-left:-400px
				 border: }


div#footer{
			clear:left;
			width:100%;}

</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make 

long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long 

make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler 

column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler 

silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler 

make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler 

text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long 

make column make silly long column long make very </p>


</div>
</div>



<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler 

text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very 

silly column silly silly fill fill long filler </p>
</div>


<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make 

silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>

<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>

Victor Ananiev · December 15, 2008

читаем про margin:0 auto; на сайте есть поищи)

Goldie · December 16, 2008

И ведь работает

Victor Ananiev · December 16, 2008

Впредь вначале лучше погуглить хотяб по форуму, а можно и по сайту тоже ;-)

spdif · December 18, 2008

Не могу понять почему не работает свойство в идентификаторе
text-aline: center;

Не может быть, как-же так, чтобы text-aline не работал? ни за что не поверю! :angry: Вобщем идите вы... сюда

Dimitry Wolotko · December 18, 2008

Всё равно margin:0px auto лучше будет, в этой ситуации.

Vlad · December 18, 2008

Гы, я еще одну подобную ошибку в коде нашел! Короче, надо прогнать через валидатор CSS, все глюки сразу же на блюдечке покажут.

spdif · December 18, 2008

Всё равно margin:0px auto лучше будет, в этой ситуации.

Dimitry, даже не то что это лучьше будет, оно кагбЭ очевидно что вот так.

Просто такие довольно простые и очевидные вещи а вот постоянно одни и теже вопросы у людей, как выровнять? как отцентровать? тоску вобщем наводят

Что может быть проще, например блок по центру контейнера,

к примеру это див в теле:

<body>
<div id="center"></div>
</body>

пускай это будет уникальный див, центруем его в двух осях:

#center{
  width: 200px;
  height: 200px;
  background: #0000ff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

вобщем элементарно,

другой случай, тотже див центруем по одной оси к примеру горизонтально:

#center{
  width: 200px;
  height: 200px;
  background: #0000ff;
  position: relative;
  margin: 0 auto;
}

вот пожалуйстО все просто.

Так что люди, старайтесь хотябы простые элементарные вещи понять и решить самостоятельно, вы от этого больше гораздо выиграете чем вам дадут готовое решение вы его используете но приципа вы так и не поймете и опыта соответственно тоже не приобритЁте какой-же тут опыт, скопировать - вставить? :angry:

Совет: не пытайтесь запоминать а пытайтесь понимать. (Удачи)

Sign In

Выравнивание по центру

Question

Goldie

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

spdif

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

spdif

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information