Comment définir le centrage horizontal et vertical des éléments HTML-tutoriel HTML-php.cn

Comment définir le centrage horizontal et vertical des éléments HTML

php中世界最好的语言

Libérer： 2018-01-24 10:01:44

original

4762 Les gens l'ont consulté

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>

Copier après la connexion

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);   
}

Copier après la connexion

É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);   
}

Copier après la connexion

Alignement central horizontal et vertical :

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/  
    margin-top: -100px;    /*height/-2*/  
}

Copier après la connexion

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);   
}

Copier après la connexion

É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);   
}

Copier après la connexion

Alignement central horizontal et vertical :

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

Copier après la connexion

JQuery :

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

Copier après la connexion

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!