Как центрировать плавающие элементы? - PullRequest
Новая
       13

Как центрировать плавающие элементы?

6 голосов
/ 18 января 2012

Я хочу центрировать три элемента div, которые появляются в макете ниже (у всех есть «float: left»).Возможно ли это?

Я не возражаю против использования div-оболочки.

Text-align: center и display: inline-block не будет работать с моим кодом.

enter image description here

Ответы [ 8 ]

20 голосов
/ 18 января 2012

Если вы хотите центрировать их, вы не можете плавать их.Лучшей альтернативой было бы сделать их все display: inline-block, чтобы вы могли по-прежнему стилизовать их как элемент блока, и они все равно будут обращать внимание на ваш text-align: center на родительской оболочке.Это может показаться хорошим решением для предоставленного вами ограниченного примера.

Чтобы учесть совместимость браузера, вам нужно изменить их на <span> вместо <div> перед добавлениемdisplay: inline-block на них.Это будет поддерживаться во всем IE7 и выше, и во всех других современных браузерах.IE6 не будет поддерживаться, но он больше широко используется только в Китае .

5 голосов
/ 18 января 2012 
div#wrapper {
    width:960px;
    margin: 0 auto;
}

http://jsfiddle.net/WyxHQ/1/

редактирование:

Перенес полный код из скрипки, чтобы ответить согласно предложению 

<div id="outer-wrapper">
    <div id="wrapper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

HTML 

div#outer-wrapper{
border:2px solid black;
    padding:10px;
    width:100%;
}

CSS 

div#wrapper{
    width:99px;
    margin:0 auto;
} 

div {
    width:33px;
    height:20px;
}

div.one{
    background:red;
    float:left;
}

div.two{
    background:blue;
        float:left;
}

div.three{
    background:green;
        float:left;
}
2 голосов
/ 18 января 2012

Попробуйте это: http://jsfiddle.net/nvpXx/3/

Вы можете обернуть свои плавающие элементы div с элементом inline-block и центрировать его внутри родительского элемента.

HTML 

<div id="main">
    <div class="wrap">
        <div class="item">thing 1</div>
        <div class="item">thing 2</div>
        <div class="item">thing 3</div>
        <div class="clear"></div>
    </div>
</div>

CSS 

#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}

Потенциальная ловушка

Это не работает, если у вас так много плавающих элементов, что они переносятся на вторую строку.В этот момент div.wrap расширяется до 100% своего контейнера, и в результате все становится не в центре.

2 голосов
/ 18 января 2012

Вы также можете использовать список и получить те же результаты:

CSS: 

.wrap
  {
    border:2px solid black;
    width:100%;
  }

ul
  {
    width:99px;
    margin:0 auto;
    height: 20px;    
  } 

ul li 
  {
    width:33px;
    height:20px;
    float: left;
    margin: 0px;
    padding: 0px;
  }

ul li.red 
  {
     background-color: red;   
  }

ul li.blue 
  {
     background-color: blue;   
  }

ul li.green 
  {
     background-color: green;   
  }

HTML: 

    <div class="wrap">
      <ul>
        <li class="red"> </li>
        <li class="blue"></li>
        <li class="green"></li>
      </ul>
    </div>
1 голос
/ 22 марта 2013

Попробуйте это, сделайте это проще: 

<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>

<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>

Это сделает его отзывчивым, хотя оно ломается в некоторой точке, это помогает создать медиа-запрос для максимальной ширины: 

<style>
@media screen and (max-width:520px){ ul li{float:none} }
</style>

Скрипка здесь

0 голосов
/ 18 января 2012

Что я хотел бы сделать, это добавить контейнер div для них.

Затем добавьте overflow: auto, чтобы div контейнера обернулось вокруг 3 div, а затем установите контейнер в центре с полем: 0 auto.

0 голосов
/ 18 января 2012

Надеюсь, это поможет: 

<body>
    <div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">   
        <div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
    </div>
</body>
0 голосов
/ 18 января 2012

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

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

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

...