Allineamento di un float: div sinistro al centro?

96

Voglio che un gruppo di immagini venga visualizzato orizzontalmente sulla pagina. Ogni immagine ha alcuni link sotto di essa, quindi ho bisogno di mettere un contenitore attorno a ogni immagine / gruppo di link.

Il più vicino che ho ottenuto a quello che voglio è metterli in div che fluttuano: left. Il problema è che voglio che i contenitori si allineano al centro non a sinistra. Come posso raggiungere questo obiettivo.

html css

— Mike
fonte

216

usa display:inline-block;invece di float

non puoi centrare i float, ma i blocchi in linea si centrano come se fossero testo, quindi sul contenitore complessivo esterno della tua "riga" - dovresti impostare text-align: center;quindi per ogni contenitore di immagine / didascalia (sono quelli che sarebbero inline-block;) puoi ri -allinea il testo a sinistra se necessario

— clairesuzy
fonte

3

Nel caso in cui qualcuno stia lottando con gli spazi che compaiono tra gli elementi, rimuovi gli spazi nel codice definendo i tuoi elementi come "<img> </img> <img> </img>" o "<img> < / img> <! - Comment -> <img> </img> ".

— Maarten

1

Oppure imposta l'elemento genitore font-size:0e ripristinalo sul figlio. Oppure usalo letter-spacing:-.31emsul genitore e letter-spacing:0sul bambino.

— Mike Causer

@ Baumr Usa invece flexbox. Di seguito è riportato un esempio .

— Jan Derk

3

potrebbe essere necessario aggiungere vertical-align:middledurante l'utilizzo display:inline-block.

— ibsenv

47

CSS Flexbox è ben supportato in questi giorni. Vai qui per un buon tutorial su flexbox.

Funziona bene in tutti i browser più recenti:

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

Espandi lo snippet

Alcuni potrebbero chiedere perché non utilizzare display: inline-block? Per cose semplici va bene, ma se hai codice complesso all'interno dei blocchi, il layout potrebbe non essere più centrato correttamente. Flexbox è più stabile del float a sinistra.

— Jan Derk
fonte

Questo funziona per centrare orizzontalmente. Che ne dici di centrare anche verticalmente?

— Cullub

Per centrare verticalmente, dai al contenitore un'altezza (es. Altezza: 500px;) e aggiungi align-items: center;

— Jan Derk,

9

provalo in questo modo:

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

9

Basta avvolgere gli elementi flottati in a <div>e dargli questo CSS:

.wrapper {

display: table;
margin: auto;

}

— goodpixels
fonte

1

Forse questo è quello che stai cercando: 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
fonte

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
fonte