Центрировать несколько div в другом div?

У меня есть четыре divs, содержащихся в другом div, и я хочу, чтобы четыре внутренних divs были центрированы.

Я использовал float: left на четырех div, чтобы они были выровнены по горизонтали.

CSS

<style>
    .square  //inner divs
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container //outer divs
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
</style>

и HTML:

<div class = "container">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
</div>

Как я могу центрировать div внутри контейнера?

Число внутренних divs может быть переменным.

Ответы

Ответ 1

Здесь альтернативный метод, если вы можете использовать дополнительный div:

<div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

Кроме того, убедитесь, что у вас есть закрывающая цитата на вашем <div class = "container">. Код, который вы вставили, отсутствует.

Ответ 2

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

text-align:center на внешнем div

display:inline-block, а затем внутренний div

http://jsfiddle.net/edi9999/yv2WY/

HTML

<div class = "container">
    <div class = "square">John</div>
    <div class = "square">Mary</div>
    <div class = "square">Doe</div>
    <div class = "square">Jane</div>
</div>

CSS

.square
{
    margin:1px;
    width:20%;
    text-align:left;
    border: 1px solid gray;
    display:inline-block;    
}
.container
{
    text-align:center;
    width:100%;
    height: 80pt;
    border: 1px solid black;
}

Ответ 3

Вместо того, чтобы плавать div.square, дайте им display: inline-block. Это может быть изворотливым в Firefox 3.0.x, но я считаю, что встроенный блок полностью поддерживается в 3.5.x.

Ответ 4

Как говорит #RwL, использование <span> работает, вот пример кода, протестированного на IE6/8, Chrome, Safari, Firefox:

CSS

<style type="text/css">
    /* borders and width are optional, just added to improve visualization */
    .parent
    {
        text-align:center;
        display: block;
        border: 1px solid red;
    }
    .child
    {
        display: inline-block;
        border: 1px solid black;
        width: 100px;
    }
</style>

HTML

<span class="parent">
    <span class="child">
        A
    </span>
    <span class="child">
        B
    </span>
</span>

Ответ 5

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

Все это подробно объясняется здесь.

Ответ 6

Просто разместите margin:auto; для всех последующих div внутри вашей основной оболочки, которая text-align:center;. СЛЕДУЕТ allign всех дочерних divs в центр родительского div, я думаю?

Ответ 7

введите описание ссылки здесь

Все в одном элементе HTML в автоцентре

Этот код применяется ко всему элементу HTML в Центре без @mediaquery.

Главное свойство css для HTML-элемента auto center отображает встроенный блок div chide и добавляет текстовое выравнивание свойства css в родительский div

.center {
            border: 1px groove;
            width: 97px;
            border-radius: 7px;
            padding: 10px;
            width: 122px;
            margin-left: 12px;
            margin-top: 13px;
            display: inline-block;
            text-decoration: none;

            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.2em;
            color: #000000;
            background: #dbdbdb;
        }

<div style="width: auto;text-align: center;">

            <div class="center">Div1</div>
            <div class="center">Div2</div>
            <div class="center">Div3</div>
            <div class="center">Div4</div>
            <div class="center">Div5</div>
            <div class="center">Div6</div>
            <div class="center">Div7</div>

    </div>

посмотрите этот пример, нажмите здесь