Как центрировать контент веб-страницы - PullRequest
Новая
       5

Как центрировать контент веб-страницы

2 голосов
/ 26 января 2011

Я не могу решить вопрос о том, почему мои два div не центрируются на странице.Я знаю, что это из-за поплавка: слева.Но я не могу понять, как решить проблему.Кто-нибудь может помочь?

Вот мой HTML: 

<body>
<div align="center">  
<div id="left" class="left">
Left box needs to be on left of of white box
</div>

<div id="content" class="content">
Right box needs to be on the right side of red box
</div>

</div>    
</body>

Вот мой CSS: 

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

body {
  font-family: Arial, sans-serif;
  background: #006699;
}

.content{
  width: 300px;
  float: left;
  background: #ffffff;
  height: 300px;
 }

.left{
  background: none repeat scroll 0 0 red;
  float: left;
  height: 300px;
  width: 300px;
 }

Я знаю число с плавающей точкой: left;вызывает проблему, но я не знаю, как ее решить.

Спасибо.

1 Ответ

5 голосов
/ 26 января 2011

оберните их в div с установленной шириной и margin: 0 auto; ... например, измените ваш div верхнего уровня с align="center" на class="center" (или id вместо класса), а затем выполните: 

.center {
  width: 600px;
  margin: 0 auto;
}

атрибут align не будет влиять на выравнивание элемента уровня блока, а скорее на выравнивание встроенных элементов внутри него. которые не твои div.

...