Mehrere Divs in einem anderen Div zentrieren?

Ich habe vier Divs, die in einem anderen Div enthalten sind, und ich möchte, dass die vier inneren Divs zentriert sind.

Ich habe benutzt float: left auf den vier divs so, dass sie horizontal ausgerichtet sind.

CSS:

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

und HTML:

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

Wie kann ich die Divs im Container zentrieren?

Die Anzahl der inneren Divs kann variabel sein.

Da Sie die Anzahl der divs, die Sie haben, nicht kennen, sollten Sie verwenden

text-align:center auf der äußeren div

display:inline-block auf dann innere 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;
}

Hier ist eine alternative Methode, wenn Sie ein zusätzliches div verwenden können:

<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>

Stellen Sie außerdem sicher, dass Sie ein Schlussangebot auf Ihrem haben <div class = "container"> dort. Dem eingefügten Code fehlt einer.

Wie #RwL sagt, mit <span> funktioniert, hier ein Beispielcode, getestet auf 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> 

Anstatt die .square divs zu schweben, geben Sie sie display: inline-block. Dies könnte in Firefox 3.0.x zwielichtig sein, aber ich glaube, dass Inline-Block in 3.5.x vollständig unterstützt wird.

Die eleganteste Lösung, die ich finden konnte, wenn Sie eine dynamische Anzahl von Div-Zentren verwenden möchten
text-align: center; auf dem übergeordneten div und display: inline-block; auf die Kinder.

Es wird alles ausführlich erklärt hier.

Einfach platzieren margin:auto; für alle nachfolgenden divs innerhalb Ihres Haupt-Wrappers text-align:center;. SOLLTE ich denke, alle untergeordneten Divs auf die Mitte des übergeordneten Div ausrichten?

Geben Sie hier die Linkbeschreibung ein

Alles in einem HTML-Element in der automatischen Mitte

Dieser Code gilt für das gesamte HTML-Element in Center ohne @mediaquery.

• Das HTML-Element auto center main css property display inline-block of the chide div and add css property text-align center of parent 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>

Sehen Sie sich dieses Beispiel an. Klicken Sie hier