Maison > Article > interface Web > Comment définir le centrage horizontal et vertical des éléments HTML
Comment définir le centrage horizontal et vertical des éléments HTML
- php中世界最好的语言original
- 2018-01-24 10:01:444702parcourir
Cette fois je vais vous montrer comment paramétrer le centrage horizontal et vertical des éléments html. Quelles sont les précautions pour paramétrer le centrage horizontal et vertical des éléments html Voici un cas pratique, prenons. un regard.
Lorsque nous concevons la page, nous devons souvent centrer le DIV et l'afficher horizontalement et verticalement par rapport à la fenêtre de la page, comme centrer la fenêtre de connexion.
Jusqu'à présent, de nombreuses méthodes ont été explorées.
HTML :
<body>
<div class="maxbox">
<div class="minbox align-center"></div>
</div>
</body>Le premier type : CSSPositionnement absolu
Utilisez principalement le positionnement absolu, puis utilisez la marge pour ajuster au milieu position.
Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Alignement central horizontal et vertical :
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}Deuxième type : CSS absolu Positionnement + Javascript/JQuery
utilise principalement le positionnement absolu, puis utilise Javascript/JQuery pour s'ajuster à la position médiane. Par rapport à la première méthode, cette méthode améliore la flexibilité de la classe.
Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Alignement central horizontal et vertical :
.align-center{
position: absolute;
left: 50%;
top: 50%;
}JQuery :
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});Comparaison de plusieurs méthodes :
Le premier ajustement de marge de positionnement absolu CSS a une bonne compatibilité mais manque de flexibilité. Si de nombreuses cases doivent être centrées horizontalement et verticalement, elles doivent écrire des .align-center différents en raison de leur largeur et de leur hauteur différentes.
Le second utilise un langage de script, qui présente une bonne compatibilité et compense les défauts du premier. L'effet du centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Le troisième utilise de nouvelles propriétés de CSS3 et est compatible avec IE10, Chrome, Firefox et Opera. La compatibilité n'est pas très bonne et l'effet de centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser HTML et CSS pour rendre le texte clair
Quelles sont les balises couramment utilisées dans XHTML
Comment utiliser la balise d'image img en HTML/XHTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!