Comment puis-je centrer horizontalement un <div>
dans un autre en <div>
utilisant CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Comment puis-je centrer horizontalement un <div>
dans un autre en <div>
utilisant CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Réponses:
Vous pouvez appliquer ce CSS à l'intérieur <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Bien sûr, vous ne devez pas définir l' width
à 50%
. N'importe quelle largeur inférieure au contenant <div>
fonctionnera. C'est margin: 0 auto
ce que fait le centrage réel.
Si vous ciblez Internet Explorer 8 (et versions ultérieures), il peut être préférable de le faire à la place:
#inner {
display: table;
margin: 0 auto;
}
Il fera le centre de l'élément intérieur horizontalement et cela fonctionne sans définir un spécifique width
.
Exemple de travail ici:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
je pense.
margin:0 auto
: il peut s'agir en margin: <whatever_vertical_margin_you_need> auto
second lieu de la marge horizontale.
Si vous ne souhaitez pas définir une largeur fixe à l'intérieur, div
vous pouvez faire quelque chose comme ceci:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Cela fait de l'intérieur div
un élément en ligne qui peut être centré avec text-align
.
float: none;
et n'est probablement nécessaire que parce que #inner a hérité float
d'un left
ou right
de quelque part ailleurs dans votre CSS.
text-align
sorte que vous voudrez peut-être définir les valeurs intérieures text-align
à initial
ou une autre valeur.
Les meilleures approches sont avec CSS 3 .
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Selon votre convivialité, vous pouvez également utiliser le box-orient, box-flex, box-direction
propriétés.
Fléchir :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Et cela explique pourquoi le modèle de boîte est la meilleure approche :
-webkit
drapeaux pour flexbox ( display: -webkit-flex;
et -webkit-align-items: center;
et -webkit-justify-content: center;
)
Supposons que votre div mesure 200 pixels de large:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Assurez-vous que l'élément parent est positionné , c'est-à-dire relatif, fixe, absolu ou collant.
Si vous ne connaissez pas la largeur de votre div, vous pouvez utiliser à la transform:translateX(-50%);
place de la marge négative.
https://jsfiddle.net/gjvfxxdj/
Avec CSS calc () , le code peut devenir encore plus simple:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
Le principe est toujours le même; placez l'article au milieu et compensez la largeur.
J'ai créé cet exemple pour montrer comment verticalement et horizontalement align
.
Le code est essentiellement le suivant:
#outer {
position: relative;
}
et...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
Et il restera dans le center
même lorsque vous redimensionnez votre écran.
Certaines affiches ont mentionné la façon de centrer CSS en utilisant display:box
.
Cette syntaxe est obsolète et ne devrait plus être utilisée. [Voir aussi ce post] .
Donc, pour être complet, voici la dernière façon de centrer dans CSS 3 en utilisant le module de mise en page de boîte flexible .
Donc, si vous avez un balisage simple comme:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... et vous souhaitez centrer vos articles dans la boîte, voici ce dont vous avez besoin sur l'élément parent (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Si vous devez prendre en charge des navigateurs plus anciens qui utilisent une syntaxe plus ancienne pour flexbox, voici un bon endroit à regarder.
flex-direction
valeur. Si c'est «ligne» (par défaut) - alors justify-content: center;
c'est pour l'alignement horizontal (comme je l'ai mentionné dans la réponse) Si c'est «colonne» - alors justify-content: center;
c'est pour l'alignement vertical.
Si vous ne voulez pas définir une largeur fixe et ne voulez pas la marge supplémentaire, ajoutez display: inline-block
à votre élément.
Vous pouvez utiliser:
#element {
display: table;
margin: 0 auto;
}
display: table;
auparavant. Qu'est ce que ça fait?
Horizontalement et verticalement. Il fonctionne avec des navigateurs raisonnablement modernes (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Il ne peut pas être centré si vous ne lui donnez pas de largeur. Sinon, il prendra, par défaut, tout l'espace horizontal.
width: fit-content;
et margin: 0 auto
. Je pense que cela peut fonctionner avec une largeur inconnue.
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Réglez width
et réglez margin-left
et margin-right
sur auto
. C'est uniquement pour l'horizontale . Si vous voulez dans les deux sens, vous devez le faire dans les deux sens. N'ayez pas peur d'expérimenter; ce n'est pas comme si vous cassiez quoi que ce soit.
J'ai récemment dû centrer un div "caché" (c'est-à-dire display:none;
) qui contenait un formulaire déposé qui devait être centré sur la page. J'ai écrit le code jQuery suivant pour afficher le div caché, puis mettre à jour le contenu CSS à la largeur générée automatiquement de la table et modifier la marge pour la centrer. (La bascule d'affichage est déclenchée en cliquant sur un lien, mais ce code n'était pas nécessaire pour s'afficher.)
REMARQUE: je partage ce code, car Google m'a amené à cette solution Stack Overflow et tout aurait fonctionné, sauf que les éléments cachés n'ont aucune largeur et ne peuvent être redimensionnés / centrés qu'après leur affichage.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
La façon dont je le fais habituellement utilise la position absolue:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Le div externe n'a pas besoin de propriétés supplémentaires pour que cela fonctionne.
Pour Firefox et Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Pour Internet Explorer, Firefox et Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
La text-align:
propriété est facultative pour les navigateurs modernes, mais elle est nécessaire en mode Quirks d'Internet Explorer pour la prise en charge des navigateurs hérités.
Utilisation:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Une autre solution pour cela sans avoir à définir une largeur pour l'un des éléments consiste à utiliser l' transform
attribut CSS 3 .
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
L'astuce consiste à translateX(-50%)
placer l' #inner
élément de 50% à gauche de sa propre largeur. Vous pouvez utiliser la même astuce pour l'alignement vertical.
Voici un violon montrant l'alignement horizontal et vertical.
Plus d'informations sur Mozilla Developer Network .
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Chris Coyier qui a écrit un excellent article sur «Centrer dans l'inconnu» sur son blog. C'est un tour d'horizon de plusieurs solutions. J'en ai posté un qui n'est pas publié dans cette question. Il prend en charge plus de navigateurs que la solution Flexbox , et vous n'utilisez pas display: table;
ce qui pourrait casser d'autres choses.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
J'ai récemment trouvé une approche:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Les deux éléments doivent avoir la même largeur pour fonctionner correctement.
#inner
seulement: #inner { position:relative; left:50%; transform:translateX(-50%); }
. Cela fonctionne pour n'importe quelle largeur.
Par exemple, consultez ce lien et l'extrait ci-dessous:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Si vous avez beaucoup d'enfants sous un parent, votre contenu CSS doit donc être comme cet exemple sur violon .
Le contenu HTML ressemble à ceci:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Ensuite, voyez cet exemple sur le violon .
D'après mon expérience, la meilleure façon de centrer une boîte horizontalement est d'appliquer les propriétés suivantes:
text-align: center;
display: inline-block;
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Voir aussi ce violon !
D'après mon expérience, la meilleure façon de centrer une boîte à la fois verticalement et horizontalement pour utiliser un conteneur supplémentaire et d' appliquer les propriétés suivantes:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Voir aussi ce violon !
La façon la plus simple:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
n'en a pas besoin width:100%;
comme le fait <div>
toujours par défaut width:100%
. et text-align:center
n'est pas non plus nécessaire du tout.
Si la largeur du contenu est inconnue, vous pouvez utiliser la méthode suivante . Supposons que nous ayons ces deux éléments:
.outer
-- pleine largeur.inner
- pas de largeur définie (mais une largeur max pourrait être spécifiée)Supposons que la largeur calculée des éléments soit respectivement de 1000 pixels et 300 pixels. Procédez comme suit:
.inner
intérieur.center-helper
.center-helper
un bloc en ligne; il devient la même taille que .inner
ce qui en fait 300 pixels de large..center-helper
50% à droite par rapport à son parent; cela place sa gauche à 500 pixels par rapport à. extérieur..inner
50% vers la gauche par rapport à son parent; cela place sa gauche à -150 pixels par rapport à. aide centrale, ce qui signifie que sa gauche est à 500 - 150 = 350 pixels par rapport à. extérieur..outer
caché pour empêcher la barre de défilement horizontale.Démo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
Vous pouvez faire quelque chose comme ça
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Cela alignera également le #inner
verticalement. Si vous ne le souhaitez pas, supprimez les propriétés display
et vertical-align
;
Voici ce que vous voulez dans les plus brefs délais.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
L'application text-align: center
du contenu en ligne est centrée dans la zone de ligne. Cependant, comme le div interne a par défaut, width: 100%
vous devez définir une largeur spécifique ou utiliser l'une des options suivantes:
L'utilisation margin: 0 auto
est une autre option et convient mieux à la compatibilité des navigateurs plus anciens. Cela fonctionne avec display: table
.
display: flex
se comporte comme un élément de bloc et dispose son contenu selon le modèle flexbox. Cela fonctionne avec justify-content: center
.
Remarque: Flexbox est compatible avec la plupart des navigateurs mais pas avec tous. Voir ici pour une liste complète et à jour de la compatibilité des navigateurs.
transform: translate
vous permet de modifier l'espace de coordonnées du modèle de formatage visuel CSS. En l'utilisant, les éléments peuvent être traduits, pivotés, mis à l'échelle et asymétriques. Pour centrer horizontalement il faut position: absolute
et left: 50%
.
<center>
(Obsolète)La balise <center>
est l'alternative HTML à text-align: center
. Il fonctionne sur les anciens navigateurs et sur la plupart des nouveaux, mais il n'est pas considéré comme une bonne pratique car cette fonctionnalité est obsolète et a été supprimée des normes Web.
Vous pouvez utiliser display: flex
pour votre div externe et pour centrer horizontalement vous devez ajouterjustify-content: center
#outer{
display: flex;
justify-content: center;
}
ou vous pouvez visiter w3schools - CSS flex Property pour plus d'idées.
Flex a une couverture de support du navigateur de plus de 97% et pourrait être le meilleur moyen de résoudre ce genre de problèmes en quelques lignes:
#outer {
display: flex;
justify-content: center;
}
Eh bien, j'ai réussi à trouver une solution qui conviendrait peut-être à toutes les situations, mais utilise JavaScript:
Voici la structure:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
Et voici l'extrait JavaScript:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Si vous souhaitez l'utiliser dans une approche réactive, vous pouvez ajouter les éléments suivants:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Cette méthode fonctionne également très bien:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Pour l'intérieur <div>
, la seule condition est que son height
et width
ne doit pas être plus grand que celui de son contenant.
J'ai trouvé une option:
Tout le monde dit d'utiliser:
margin: auto 0;
Mais il y a une autre option. Définissez cette propriété pour le div parent. Cela fonctionne parfaitement à tout moment:
text-align: center;
Et voyez, l'enfant va au centre.
Et enfin CSS pour vous:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}