Wyrównywanie pływaka: lewy element div do środka?

97

Chcę, aby grupa obrazów była wyświetlana poziomo w poprzek strony. Każdy obraz ma kilka linków poniżej, więc muszę umieścić kontener wokół każdego obrazu / grupy linków.

Najbliżej tego, co chcę, jest umieszczenie ich w elementach div, które pływają: left. Problem polega na tym, że chcę, aby kontenery były wyrównane do środka, a nie do lewej. Jak mogę to osiągnąć.

html css

— Mikrofon
źródło

218

użyj display:inline-block;zamiast float

nie możesz wyśrodkować elementów zmiennoprzecinkowych, ale bloki inline wyśrodkowują się tak, jakby były tekstem, więc na zewnętrznym ogólnym kontenerze twojego "wiersza" - ustawisz text-align: center;wtedy dla każdego kontenera obrazu / podpisu (to będzie taki, który byłby inline-block;) możesz ponownie - wyrównaj tekst do lewej, jeśli potrzebujesz

— clairesuzy
źródło

3

Na wypadek, gdyby ktoś miał problemy ze spacjami, które pojawiają się między elementami, usuń spacje w kodzie, definiując elementy, takie jak „<img> </img> <img> </img>” lub „<img> < / img> <! - Comment -> <img> </img> '.

— Maarten

1

Lub ustaw element nadrzędny font-size:0i przywróć go dziecku. Lub użyj letter-spacing:-.31emna rodzicu i letter-spacing:0dziecku.

— Mike Causer

@Baumr Zamiast tego użyj flexbox. Poniżej znajduje się przykład .

— Jan Derk

3

może być konieczne dodanie vertical-align:middlepodczas używania display:inline-block.

— ibsenv

47

CSS Flexbox jest obecnie dobrze obsługiwany . Przejdź tutaj, aby uzyskać dobry samouczek na temat flexbox.

Działa to dobrze we wszystkich nowszych przeglądarkach:

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

Rozwiń fragment

Niektórzy mogą zapytać, dlaczego nie użyć display: inline-block? W przypadku prostych rzeczy jest w porządku, ale jeśli masz złożony kod w blokach, układ może nie być już prawidłowo wyśrodkowany. Flexbox jest bardziej stabilny niż lewy pływak.

— Jan Derk
źródło

Działa to przy centrowaniu w poziomie. A co powiesz na centrowanie również w pionie?

— Cullub

Aby wyśrodkować w pionie, nadaj kontenerowi wysokość (np. Wysokość: 500px;) i dodaj align-items: center;

— Jan Derk

9

spróbuj tego w ten sposób:

  <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
źródło

9

Po prostu zawiń elementy pływające w a <div>i nadaj mu ten CSS:

.wrapper {

display: table;
margin: auto;

}

— goodpixels
źródło

1

Być może tego właśnie szukasz - 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
źródło

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
źródło