Float ausrichten: links div zur Mitte?

95

Ich möchte, dass eine Gruppe von Bildern horizontal auf der Seite angezeigt wird. Jedes Bild hat ein paar Links darunter, also muss ich einen Container um jedes Bild / jede Linkgruppe legen.

Das, was ich am nächsten an dem habe, was ich will, ist, sie in schwebende Divs zu setzen: links. Das Problem ist, ich möchte, dass die Container die Mitte nicht links ausrichten. Wie kann ich das erreichen?

html css Mike
quelle

Antworten:

214

verwenden display:inline-block;anstelle des Schwimmers

Sie können Floats nicht zentrieren, aber Inline-Blöcke werden so zentriert, als wären sie Text. Sie können sie also auf dem äußeren Gesamtcontainer Ihrer "Zeile" text-align: center;für jeden Bild- / Beschriftungscontainer festlegen (es sind diejenigen, die es wären inline-block;), die Sie erneut verwenden können - Richten Sie den Text bei Bedarf nach links aus

clairesuzy
quelle
3
Für den Fall, dass jemand mit den Leerzeichen zwischen den Elementen zu kämpfen hat, entfernen Sie das Leerzeichen in Ihrem Code, indem Sie Ihre Elemente wie '<img> </ img> <img> </ img>' oder '<img> <definieren / img> <! - Kommentar -> <img> </ img> '.
Maarten
1
Oder legen Sie das übergeordnete Element fest font-size:0und stellen Sie es für das untergeordnete Element wieder her. Oder verwenden Sie letter-spacing:-.31emauf dem Elternteil und letter-spacing:0auf dem Kind.
Mike Causer
@Baumr Verwenden Sie stattdessen Flexbox. Es gibt unten ein Beispiel .
Jan Derk
3
Möglicherweise müssen Sie vertical-align:middlewährend der Verwendung hinzufügen display:inline-block.
Ibsenv
47

CSS Flexbox wird heutzutage gut unterstützt . Hier finden Sie ein gutes Tutorial zur Flexbox.

Dies funktioniert in allen neueren Browsern einwandfrei:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}
<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>
Erweitern Sie das Snippet

Einige fragen sich vielleicht, warum nicht display: inline-block verwendet wird. Für einfache Dinge ist es in Ordnung, aber wenn Sie komplexen Code innerhalb der Blöcke haben, ist das Layout möglicherweise nicht mehr richtig zentriert. Flexbox ist stabiler als links schweben.

Jan Derk
quelle
Dies funktioniert zum horizontalen Zentrieren. Wie wäre es auch mit einer vertikalen Zentrierung?
Cullub
Um vertikal zu zentrieren, geben Sie dem Container eine Höhe (z. B. Höhe: 500px;) und fügen Sie Ausrichtungselemente hinzu: center;
Jan Derk vor
9

versuchen Sie es so:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>
Lauw
quelle
9

Wickeln Sie einfach schwebende Elemente in ein <div>und geben Sie ihm dieses CSS:

.wrapper {

display: table;
margin: auto;

}
gute Pixel
quelle
1

Vielleicht ist es das, wonach Sie suchen - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>
Shaq
quelle
0 
.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}
Teoman Shipahi
quelle