Question Comment centrez-vous facilement un
en utilisant CSS?


J'essaie de centrer horizontalement un <div> Bloquez l'élément sur une page et définissez-le sur une largeur minimale. Quel est le moyen le plus simple de le faire? je veux le <div> élément pour être en ligne avec le reste de ma page. Je vais essayer de dessiner un exemple:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

616
2018-03-06 08:51


origine


Réponses:


Dans le cas d'un largeur non-fixe div (c'est-à-dire que vous ne savez pas combien d'espace le div occupera).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Gardez à l'esprit que la largeur de #yourdiv est dynamique -> il va grandir et se rétrécir pour s'adapter au texte qu'il contient.

Vous pouvez vérifier la compatibilité du navigateur sur Puis-je utiliser


661
2018-05-29 10:28



Dans la plupart des navigateurs, cela fonctionnera:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

Dans IE6, vous devrez ajouter un autre extérieur div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>


533
2018-03-06 09:08



margin: 0 auto;

comme ck a dit, min-largeur n'est pas supporté par tous les navigateurs


50
2018-03-06 08:55



Le titre de la question et le contenu sont en fait différents, donc je vais poster deux solutions pour cela en utilisant Flexbox.

j'imagine Flexbox va remplacer / ajouter à la solution standard actuelle au moment où IE8 et IE9 est complètement détruit;)

Vérifiez le courant Tableau de compatibilité du navigateur pour la flexbox

Élément unique

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Plusieurs éléments mais un seul centre

Le comportement par défaut est flex-direction: row qui alignera tous les éléments enfants sur une seule ligne. Le régler à flex-direction: column aidera les lignes à être empilées.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>


28
2017-08-14 10:29



CSS, HTML:

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Votre diagramme montre également un élément de niveau bloc (auquel un div est habituellement), pas un élément en ligne.

Du haut de ma tête, min-width est supporté dans FF2 + / Safari3 + / IE7 +. Peut être fait pour IE6 en utilisant CSS CSS, ou un simple morceau de JS.


25
2018-03-06 08:58



.center {
   margin-left: auto;
   margin-right: auto;
}

La largeur minimale n'est pas prise en charge globalement, mais peut être implémentée en utilisant

.divclass {
   min-width: 200px;
}

Ensuite, vous pouvez définir votre div pour être

<div class="center divclass">stuff in here</div>

21
2018-03-06 08:54



Si les anciens navigateurs ne posent pas de problème, utilisez HTML5 / CSS3. Si c'est le cas, appliquez des polyfills et utilisez toujours HTML5 / CSS3. Je suppose que votre div n'a pas de marge ou paddings ici, mais ils sont relativement faciles à expliquer. Le code suit.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Qu'est-ce que cela fait est:

  1. Positionnez le div par rapport à son contenant;
  2. Positionnez le divlimite gauche à 50% de sa largeur de conteneur horizontalement;
  3. Traduire horizontalement de 50% de la divde sa propre largeur.

Il est facile d'imaginer ce processus pour confirmer que le div serait centré horizontalement par la suite. En prime, vous pouvez centre verticalement sans coût supplémentaire:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

L'avantage de cette approche est que vous n'avez pas à faire de trucs contre-intuitifs, comme par exemple considérer votre div comme un texte, l'entourer d'un conteneur supplémentaire (souvent sémantiquement inutile) ou lui donner une largeur fixe, ce qui n'est pas toujours possible.

Ne pas oublier les préfixes des fournisseurs pour transform si besoin.


20
2017-11-04 07:54