alignement vertical et horizontal (milieu et centre) avec css [dupliquer]
cette question a déjà une réponse ici:
je pratique CSS et je suis tellement confus comment puis-je forcer mon div élément d'être au centre (verticalement et horizontalement) à ma page (moyen quel chemin ou comment utiliser la compatibilité entre navigateurs?
meilleures salutations !
5 réponses
il y a plusieurs méthodes:
- alignement central horizontal et vertical d'un élément avec mesure fixe
CSS
<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>
2 . Centrer horizontalement et verticalement une seule ligne de texte
CSS
<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>
3 . Center alignement horizontal et vertical d'un élément sans mesure spécifique
CSS
<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>
plus ici : alignement Horizontal et Vertical dans CSS
Ce blog décrit deux méthodes de centrer une div à la fois horizontalement et verticalement. L'un utilise seulement CSS et fonctionnera avec des divs qui ont une taille fixe; l'autre utilise jQuery et fonctionnera avec des divs pour lesquels vous ne connaissez pas la taille à l'avance.
j'ai dupliqué les exemples CSS et jQuery de la démo du blog ici:
CSS
si vous avez une div avec une classe de .classname, le css ci-dessous devrait fonctionner.
le left:50%; top:50%; place le coin supérieur gauche du div au centre de l'écran; le margin:-75px 0 0 -135px; le déplace vers la gauche et vers le haut par la moitié de la largeur et la hauteur du div de taille fixe respectivement.
.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
jQuery
$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
Voici une démonstration des techniques dans la pratique .
ce site offre quelques options sur le recentrage vertical de votre div: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
ce n'est pas aussi facile à faire qu'on pourrait s'y attendre -- vous ne pouvez vraiment faire l'alignement vertical que si vous connaissez la hauteur de votre conteneur. SI c'est le cas, vous pouvez le faire avec un positionnement absolu.
le concept consiste à placer les positions haut / gauche à 50%, puis à utiliser des marges négatives (à la moitié de la hauteur / largeur) pour ramener le conteneur au centre.
exemple: http://jsbin.com/ipawe/edit
CSS de base:
#mydiv {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 700px;
margin-top: -200px; /* -(1/2 height) */
margin-left: -350px; /* -(1/2 width) */
}
Il y a une meilleure solution maintenant: Vertical align quoi que ce soit avec seulement 3 lignes de CSS