web-dev-qa-db-fra.com

Bloc d'affichage central du centre CSS?

J'ai un code de travail ici: http://jsfiddle.net/WVm5d/ (vous devrez peut-être agrandir la fenêtre de résultat pour voir l'effet aligner au centre)

Question

Le code fonctionne bien mais je n'aime pas avoir display: table;. C’est la seule façon pour moi d’aligner le centre de la classe enveloppante. Je pense que ce serait mieux s'il y avait un moyen d'utiliser display: block; ou display: inline-block;. Est-il possible de résoudre le centre d'alignement d'une autre manière?

Ajouter un fixe avec au conteneur n'est pas une option pour moi.

Je vais également coller mon code ici si le lien JS Fiddle _ est brisé à l'avenir: 

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}
<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>
csscss3
185
Jens Törnell

La solution acceptée ne fonctionnerait pas pour moi car j'ai besoin d'un élément enfant avec display: inline-block pour être centré à la fois horizontalement et verticalement dans un parent à 100% de la largeur.

J'ai utilisé les propriétés justify-content et align-items de Flexbox, qui vous permettent respectivement de centrer les éléments horizontalement et verticalement. En réglant les deux sur center sur le parent, l'élément enfant (ou même plusieurs éléments!) Sera parfaitement au milieu.

Cette solution ne nécessite pas de largeur fixe, ce qui aurait été inapproprié pour moi car le texte de mon bouton changerait.

Voici une démo de CodePen et un extrait du code correspondant ci-dessous:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}
<div class="parent">
  <a class="child" href="#0">Button</a>
</div>
51
EdA

Essaye ça. J'ai ajouté text-align: center au corps et display:inline-block pour envelopper, puis j'ai retiré votre display: table.

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
252
Bazzz

Si vous avez un <div> avec text-align:center;, alors tout texte à l'intérieur sera centré par rapport à la largeur de cet élément conteneur. Les éléments inline-block sont traités comme du texte à cette fin, ils seront donc également centrés.

68
Spudley

Vous pouvez également le faire avec le positionnement, définissez parent div en parent et div en enfant en absolu.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
8
vijayscode

Vous n'avez pas besoin d'utiliser "display: table". Si votre tentative de centrage automatique de la marge: 0 ne fonctionne pas, c'est parce que vous n'avez pas spécifié de largeur.

Cela fonctionnera très bien:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Vous n'avez pas besoin de spécifier display: block car cette div sera bloquée par défaut. Vous pouvez aussi probablement perdre le débordement: caché.

0
user2166297

Je viens de changer 2 paramètres:

.wrap {
    display: block;
    width:661px;
}

Démo en direct

0
Myles Gray