Centrer verticalement ma div dans mon conteneur
Résolu
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite centrer verticalement ma div dans mon conteneur (c'est à dire au millieu de mon écran étant donné que mon conteneur fait 100% de hauteur) alors j'y arrive en largeur mais pas en hauteur (il y a longtemps que je n'ai pas fais de css. Je vous remercie de votre aide.
Je souhaite centrer verticalement ma div dans mon conteneur (c'est à dire au millieu de mon écran étant donné que mon conteneur fait 100% de hauteur) alors j'y arrive en largeur mais pas en hauteur (il y a longtemps que je n'ai pas fais de css. Je vous remercie de votre aide.
.container {
width: 100%;
min-height: 100vh;
}
.article {
opacity:1;
width: 50%;
margin:50% auto;
}
<section class="container"> <section class="article"> <h1>Angus McKinnon Young</h1> <img src="img/angus.jpg"> <p><strong>Angus McKinnon Young</strong> est un musicien australien d'origine britannique, né le 31 mars 19551 à Glasgow (Écosse). Angus Young est connu pour être guitariste soliste, compositeur et cofondateur du groupe de hard rock <mark>AC/DC</mark>. Il est <span class="orange">reconnaissable par son énergie</span> sur scène, et surtout son uniforme d'écolier et son duckwalk. Site web d'<a href="http://acdc.com" rel="nofollow noopener noreferrer" target="_blank" title="AC/DC">AC/DC</a>. Tout comme les autres membres du groupe, il a été intronisé dans le Rock and Roll Hall of Fame en 2003. La même année, il a été classé 24e <mark>meilleur guitariste de tous les temps</mark> par le « magazine Rolling Stone » 2,3. Le référendum organisé par le magazine français Guitar Part en 2005 l'a classé 11e meilleur guitariste[réf. souhaitée]. Le magazine Rolling Stones le cite souvent comme étant l'un des meilleurs guitaristes de tous les temps grâce à ses performances musicales et son incroyable énergie sur scène4.</p> </section> </section>
1 réponse
Salut,
Au moins 3 solutions possibles :
Solution 1 : position absolute + transform
Solution 2 : table-cell + vertical-align
-> On ne peut pas définir une largeur de 50% sur la cellule unique, d'où le padding: 0 25%;
On peut remplacer ce padding en ajoutant un div à l'intérieur du div class="article" sur lequel on appliquerai le width: 50%;
Solution 3 : flexbox
Au passage, évite l'utilisation de width: 100%; sur un div en position relative ou static, par défaut un div occupe déjà toute la largeur disponible.
Bonne journée
Au moins 3 solutions possibles :
Solution 1 : position absolute + transform
.container {
min-height: 100vh;
position: relative;
}
.article {
width: 50%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
Solution 2 : table-cell + vertical-align
.container {
min-height: 100vh;
display: table;
}
.article {
padding: 0 25%;
display: table-cell;
vertical-align: middle;
}
-> On ne peut pas définir une largeur de 50% sur la cellule unique, d'où le padding: 0 25%;
On peut remplacer ce padding en ajoutant un div à l'intérieur du div class="article" sur lequel on appliquerai le width: 50%;
Solution 3 : flexbox
.container {
min-height: 100vh;
display: flex;
}
.article {
width: 50%;
margin: auto;
}
Au passage, évite l'utilisation de width: 100%; sur un div en position relative ou static, par défaut un div occupe déjà toute la largeur disponible.
Bonne journée
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
110
Merci beaucoup, ça marche.
