Aligner un flottant: div gauche au centre?

96

Je souhaite qu'un groupe d'images s'affiche horizontalement sur la page. Chaque image a quelques liens en dessous, je dois donc mettre un conteneur autour de chaque image / groupe de liens.

Le plus proche que j'ai obtenu de ce que je veux est de les mettre dans des divs qui flottent: gauche. Le problème est que je veux que les conteneurs s'alignent au centre et non à gauche. Comment puis-je atteindre cet objectif.

html css

— Mike
source

216

utiliser display:inline-block;au lieu de float

vous ne pouvez pas centrer les flottants, mais les blocs en ligne se centrent comme s'ils étaient du texte, donc sur le conteneur global extérieur de votre "ligne" - vous définiriez text-align: center;alors pour chaque conteneur d'image / légende (ce sont ceux qui seraient inline-block;), vous pouvez re -alignez le texte à gauche si vous avez besoin

— clairesuzy
source

3

Juste au cas où quelqu'un aurait du mal avec les espaces qui apparaissent entre les éléments, supprimez les espaces blancs dans votre code en définissant vos éléments comme '<img> </img> <img> </img>' ou '<img> < / img> <! - Commentaire -> <img> </img> '.

— Maarten

1

Ou définissez l'élément parent font-size:0et restaurez-le sur l'enfant. Ou utiliser letter-spacing:-.31emsur le parent et letter-spacing:0sur l'enfant.

— Mike Causer le

@Baumr Utilisez plutôt flexbox. Il y a un exemple ci-dessous .

— Jan Derk

3

vous devrez peut-être ajouter vertical-align:middlelors de l'utilisation display:inline-block.

— ibsenv

47

CSS Flexbox est bien pris en charge ces jours-ci. Allez ici pour un bon tutoriel sur flexbox.

Cela fonctionne bien dans tous les nouveaux navigateurs:

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

Développer l'extrait

Certains peuvent se demander pourquoi ne pas utiliser display: inline-block? Pour des choses simples, c'est bien, mais si vous avez du code complexe dans les blocs, la mise en page peut ne plus être correctement centrée. Flexbox est plus stable que le flotteur gauche.

— Jan Derk
source

Cela fonctionne pour le centrage horizontal. Que diriez-vous également de centrer verticalement?

— Cullub

Pour centrer verticalement, donnez au conteneur une hauteur (par exemple, hauteur: 500px;) et ajoutez align-items: center;

— Jan Derk

9

essayez-le comme ceci:

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

9

Enveloppez simplement les éléments flottants dans un <div>et donnez-lui ce CSS:

.wrapper {

display: table;
margin: auto;

}

— bons pixels
source

1

C'est peut-être ce que vous recherchez - 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
source

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

— Shipahi Teoman
source