Несколько центрированных плавающих элементов в макете жидкости - PullRequest
Новая
       32

Несколько центрированных плавающих элементов в макете жидкости

6 голосов
/ 12 октября 2010

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

Схема примерно такая.

В одном модуле оболочки размещается 6 дочерних элементов.Эти дочерние элементы должны быть центрированы в ALL раз независимо от размера div-оболочки. 

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

Проблема в том, что размер браузера уменьшается, а в строку вставляется полевнизу ящики будут светиться слева, а я хочу, чтобы они всегда были по центру.Это возможно с использованием чистого CSS или мне нужно использовать JQuery?

Ответы [ 4 ]

6 голосов
/ 12 октября 2010

Вероятно, самое простое решение - это удалить стиль float: left из блоков и изменить свойство display на inline-block. Тогда все, что вам нужно сделать, это выровнять текст: центр на обертке. 

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

Вы можете проверить код здесь: http://jsbin.com/uqamu4/edit

3 голосов
/ 12 октября 2010

Вы можете использовать text-align: center в оболочке и display: inline-block для блоков, чтобы они вели себя как обычные текстовые элементы, центрированные независимо от того, что.

Предупреждение: не работает в IE6 и IE7. Работает в Chrome и FF

JSFiddle здесь .

0 голосов
/ 13 июля 2014

Решение, которое сработало для меня: 

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>
0 голосов
/ 12 октября 2010

Это не будет работать, например, в 8 или меньше, не знаю о 9, но, поскольку вы используете max-width и min-width, которые там не работают, я все равно выложу. 

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

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

Похожие темы

...