Проблема CSS - центрирование плавающих элементов div внутри контейнера - PullRequest
Новая
       2

Проблема CSS - центрирование плавающих элементов div внутри контейнера

3 голосов
/ 26 июля 2010

У меня проблемы с центрированием нескольких плавающих элементов. Я немного искал (особенно здесь и здесь ), но мне кажется, что-то не хватает. Я выложу свой код, и, надеюсь, кто-нибудь здесь увидит, в чем проблема ...

То, что я хотел бы сделать, это что-то вроде этого

снимок экрана http://efredericks.net/layout.PNG

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

Мой внешний контейнер правильно отцентрирован в браузере, но внутри ничего нет.

HTML 

<body>
  <!-- outer_container - centers for IE -->
  <div id="outer_container">

    <!-- container - wrapper for content -->
    <div id="container">

      <!-- header - logo : menu -->
      <div id="hdr">

        <div id="hdr_right">
          <h1><a href="#" id="lhome">logo</a></h1>
          <div id="menu">
          <ul>
            <li><a id="menu_i1" href="#">item 1</a></li>
            <li><a id="menu_i2" href="#">item 2</a></li>
            <li><a id="menu_i3" href="#">item 3h</a></li>
          </ul>
          </div> 
        </div>

        <div class="clear"></div>

      </div>
      <!-- /header -->

      <!-- main -->
      <div id="main">

        <!-- problem area here -->
        <div id="outer">
          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>

          <div class="inner">a</div>
          <div class="inner">b</div>
          <div class="inner">c</div>
          <div class="clear"></div>
        </div>

      </div>
      <!-- /main -->

    </div>
    <!-- /container -->

  </div>
  <!-- /outer_container -->

</body>

CSS 

* {
  margin: 0px;
  padding: 0px;    

  font-family: Tahoma, Arial, sans-serif;
  color: #888750;
}

img {
  border: 0px;
}

body {
  background: #000;
}

  margin: 0 auto;
  position: relative;
}

#hdr {
  background: #000;
  height: 99px;
}

#hdr_right {
  margin: 30px 2px 0px 0px;
  height: 75px;
  float: right;
}

#hdr img {
  float: left;
  border: 0px;
  margin: 5px 0px 0px 5px;
}

#hdr ul {
  margin-top: -10px; 
}

#hdr li {
  float: left;
  padding: 0px 5px;
}

#main {
  text-align: left;
  background: #333;
}

.clear {
  clear: both;
}

#outer {
    overflow: auto;
    padding: 5px;
    width: 790px;
    margin: 0 auto;
    text-align: center;
}
.inner {
    float: left;
    background: #181818;
    margin: 5px;
    width: 200px;
}

1 Ответ

7 голосов
/ 26 июля 2010

Насколько я понимаю, вы хотите, чтобы элементы div в div#main были отцентрированы, а не слегка смещены влево?

Если это так, то вы можете делать множество вещей, вы можете либо увеличитьразмер поля вокруг каждого div.inner до 30 пикселей: 

.inner {
    float: left;
    background: #181818;
    margin:5px 30px;
    width: 200px;
}

или уменьшение ширины div#outer до 630 пикселей (и удаление выравнивания текста, если оно вам действительно не нужно): 

#outer {
    overflow: auto;
    width: 630px;
    margin: 0 auto;
}

Надеюсь, это то, что вы искали!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...