Центрирование трех тегов Div внутри тега Div - PullRequest
Новая
       21

Центрирование трех тегов Div внутри тега Div

0 голосов
/ 17 февраля 2011

У меня есть контейнер div и я хочу разместить три тега div в центральном div, у меня правильный XHTML, но у меня возникли проблемы с центрированием трех div внутри div.

Сейчас я покажу код.

XHTML 1.0 Transitional (HTML) 

<div id="container">  
<div id="header">
</div>
<div id="content">
  <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
</div> 
</div>

Каскадная таблица стилей (CSS)) 

#container {
  width: 900px;
  height: inherit;
  margin: 30px auto;
}

#content {
  float: center;
  width: inherit;
  height: inherit;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

#header {
  margin: 0 auto;
  background-image: url(images/logo.png);
  background-position: center;
  width: 250px;
  height: 250px;
}

#contentbox {
  margin-left: auto;
  margin-right: auto;
  float: left;
  display: block;
  width: 250px;
  height: 250px;
  background-image: url(images/contentbox.png);
}

Чтобы посмотреть пример того, что я пытаюсь сделать, пожалуйста, посетите http://www.noxinnovations.com/portfolio/hfc/

Я хочу знать, как центрировать этитри блока контента внутри контента.

Большое спасибо, Аарон Брюер

Ответы [ 3 ]

2 голосов
/ 17 февраля 2011

Проверьте, хотите ли вы:

http://jsfiddle.net/65WHf/1/

Обратите внимание, что идентификаторы должны быть уникальными, и нет такого понятия, как плавающий центр. Чтобы центрировать div, вы должны убедиться, что он расположен относительно контейнера (это поведение большинства моих браузеров по умолчанию) и использовать синтаксис followinf: 

.something {
  margin: 0 auto;
  clear: both; // instead of float
}
2 голосов
/ 17 февраля 2011

Эй, float: center; не будет работать. Для свойства float .

такого значения нет.

используйте это вместо #content css 

text-align: center;

надеюсь, что это поможет.

1 голос
/ 17 февраля 2011

Вы всегда можете сделать что-то вроде этого:

HTML: 

<div id="container">  
    <div id="header"></div>
    <div id="content">
        <div class="contentbox"></div>
        <div class="contentbox"></div>
        <div class="contentbox"></div>
    </div> 
</div>

CSS: 

.contentbox {
      margin-left: auto;
      margin-right: auto;
      float: left;
      display: block;
      width: 250px;
      height: 250px;
      border: 1px dashed #999;  /* just for visuals */
      margin: 0 10px;  /* just for visuals */
}

Вы определенно хотите не использовать идентификаторы в качестве общей практики, можете ли вы использовать их с библиотеками javascript (jquery и т. Д.) Кроме того, так чище.

...