Wie kann ich meine Divs horizontal ausrichten?

Aus irgendeinem Grund werden meine Divs in einem enthaltenden Div nicht horizontal zentriert:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Und manchmal gibt es ein Zeilendiv mit nur einem Blockdiv. Was mache ich falsch?

Um das zu erreichen, was Sie versuchen:

Erwägen Sie die Verwendung display: inline-blockanstelle von float.

Versuche dies:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

DEMO

• mit margin: 0 auto;zusammen mit width: 100%ist nutzlos , weil Sie Element den vollen Raum nehmen.

• float: leftschweben die Elemente nach links, bis kein Platz mehr vorhanden ist, sodass sie in eine neue Zeile eingefügt werden. Verwenden Sie display: inline-blockdiese Option, um Elemente inline anzeigen zu können, jedoch mit der Möglichkeit, die Größe anzugeben (im Gegensatz dazu, display: inlinewo Breite / Höhe ignoriert werden).

Ausrichtungen in CSS waren ein Albtraum gewesen. Glücklicherweise hat W3C 2009 einen neuen Standard eingeführt: Flexible Box . Es ist ein gutes Tutorial darüber hier . Persönlich finde ich es viel logischer und verständlicher als andere Methoden.

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Verwenden der FlexBox:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

Der neueste Trend ist die Verwendung von Flex oder CSS Grid anstelle von Float. Einige 1% -Browser unterstützen Flex jedoch nicht. Aber wen interessieren alte IE-Benutzer überhaupt?)

Geige: Hier überprüfen

Ein weiteres Arbeitsbeispiel mit display: inline-blockundtext-align: center

HTML :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

Geige: http://jsfiddle.net/fNvgS/

Obwohl diese Frage nicht behandelt wird (weil Sie das <div>s im Container ausrichten möchten ), sondern direkt verwandt: Wenn Sie nur ein Div horizontal ausrichten möchten, können Sie dies tun:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

Wenn Elemente in einer Zeile angezeigt werden sollen und IE 6/7 keine Rolle spielt, sollten Sie display: tableund display: table-cellanstelle von verwenden float.

inline-blockführt zu horizontalen Lücken zwischen Elementen und erfordert das Nullstellen dieser Lücken. Am einfachsten ist es, das font-size: 0übergeordnete Element festzulegen und dann font-sizefür untergeordnete Elemente wiederherzustellen , display: inline-blockindem Sie deren Wert font-sizeauf a pxoder setzen rem.

Ich versuchte die akzeptierte Antwort, fand aber schließlich Folgendes:

margin: 0 auto;
width: anything less than 100%;

Funktioniert soweit gut.

Ich habe diese beiden Ansätze verwendet, wenn ich die horizontale Div-Ausrichtung handhaben muss.
first ( Center Aligning Using the margin property ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

Wenn Sie den linken und rechten Rand auf Auto setzen, wird festgelegt, dass der verfügbare Rand gleichmäßig aufgeteilt werden soll. Die Ausrichtung in der Mitte hat keine Auswirkung, wenn die Breite 100% beträgt.

und der zweite:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

Die Verwendung des zweiten Ansatzes ist praktisch, wenn Sie mehrere Elemente haben und alle in einer Tabellenzelle zentriert sein sollen (dh mehrere Schaltflächen in einer Zelle).