Résumé des problématiques liées au centrage horizontal et vertical de la production de pages html_HTML/Xhtml

Résumé des problématiques liées au centrage horizontal et vertical de la production de pages html_HTML/Xhtml_Web

WBOY

Libérer： 2016-05-16 16:36:19

original

1600 Les gens l'ont consulté

J'ai rencontré beaucoup de problèmes de centrage ces derniers temps, j'ai donc pris le temps de les résumer ici afin qu'on puisse les retrouver facilement à l'avenir

1. Texte centré

Copier le code

Code comme suit :

Je suis au milieu...

.. hauteur ligne-hauteur texte -center（ Ne peut centrer qu'une seule ligne)
.wrap{
width:px;
height:px;
border:px solid red; > line-height: px;
}

ps:text-align:center centre simplement les éléments en ligne sous l'élément
1.2display : table-cell (Plusieurs lignes à hauteur fixe centrées)

Copier le codeLe code est le suivant :

.wrap{

width:px;
height:px;
border:px solid red
text-align: center
display:table-; cell;
vertical- align: middle;
}

display:table-cell : Cela ne fonctionne pas dans ie67, il est préférable de l'utiliser avec display:table;

ie67 : (Il ne sera plus utilisé à l'avenir. , mais mettons-le ici)
Méthode 1 : (La hauteur de la balise em est égale à la hauteur de le parent, donc centrer span et em équivaut à centrer span sur le parent)

Copier le codeLe le code est le suivant :

Je suis au milieu... Je suis au milieu... Je suis au milieu... Je suis au milieu...

.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align : middle;
display:inline-block;
width:px;
}
.wrap em{
height:%;
vertical-align: middle
display: bloc en ligne;
}

Méthode 2 : (En ajoutant une balise parent positionnée de manière absolue à l'élément enfant, puis en faisant correspondre le positionnement relatif de l'élément enfant pour le centrer horizontalement et verticalement)

Copier le codeLe code est le suivant :

< ;span class="span"> ;
Je suis au milieu... Je suis au milieu... Je suis au milieu... Je suis au milieu...

.wrap{
width:px
height:px;
border : px rouge uni;
display:table;
position:relative;
overflow: caché;
}
.wrap .span{
display:table-cell
vertical; -align: middle;
text-align: center;
*position: absolue;
top:%;
left:%;
}
.wrap .span{
*position:relative;
haut:-%;
gauche:- %;
}

1.3rembourrage (rembourrage intérieur, il va sans dire)

Copier le codeLe code est la suivante :

.wrap{

width:px;
border:px solid red;
padding:px ;
}

2. Élément centré

Copier le code Le code est la suivante :

2.1position : marge négative absolue (la largeur et la hauteur doivent être disponibles pour calculer la marge)

Copier le codeLe code est le suivant :

.wrap{
width:px;
height:px;
position:absolute
top:%
left:%
margin-top; :-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px
height:px; > > background:red;
position: absolue;
top:%
left:%
margin-top:-px; }

ps : CSS implémente le centrage horizontal et le centrage vertical des DIV

Copier le code

code Comme suit :

> Démonstration en ligne de centrage vertical haut et bas DIVCSS5

main" >DIV est centré horizontalement et verticalement de haut en basDIVCSS5

< ;/html>

Introduction au principe du centrage horizontal et vertical

Positionnement absolu : absolu est utilisé ici. Utilisez gauche et haut pour définir la distance de l'objet vers le haut et la gauche à 50 %, mais si. il est réglé à 50%, la boîte est en fait L'effet de centrage n'est pas obtenu, donc margin-left:-200px;margin-top:-100px est défini. L'astuce ici est que la valeur de margin-left est la moitié de la valeur. width, et la valeur de margin-top est également la moitié de la hauteur de l'objet. En même temps, set est négatif, obtenant ainsi un centrage horizontal et vertical.