Problème de centrage horizontal et vertical du HTML-tutoriel HTML-php.cn

Problème de centrage horizontal et vertical du HTML

高洛峰

Libérer： 2017-02-24 10:41:26

original

1381 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'ils puissent être facilement retrouvés à l'avenir

1. text

<p class="wrap">
      我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

Copier après la connexion

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

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

display:table-cell：ie67不管用,最好配合display:table;一起用

Copier après la connexion

ie67 : (je ne l'utiliserai pas dans le futur, mais je le mettrai ici. )
Méthode 1 : (La hauteur de la balise em est égale à la hauteur du parent, donc centrer span et em est équivalent à centrer span sur le parent)

<p class="wrap">
   <span>
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   </span>
   <em></em>
</p>
 .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:inline-block;
}

Copier après la connexion

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

<p class="wrap">
    <span class="span">
       <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
    </span>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

Copier après la connexion

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

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

Copier après la connexion

2. Élément centré

<p class="wrap">
    <span></span>
</p>

Copier après la connexion

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

 .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: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

Copier après la connexion

ps : CSS implémente p le centrage horizontal et centrage vertical de haut en bas

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 pCSS5</title>  
<style>  
#main {  
   position: absolute;  
   width:400px;  
   height:200px;  
   left:50%;  
   top:50%;  
   margin-left:-200px;  
   margin-top:-100px;  
   border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
   <p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>  
</body>  
</html>

Copier après la connexion

Introduction au principe du centrage horizontal et vertical
Position de positionnement absolue :l'absolu est utilisé ici, et à gauche et top sont utilisés pour définir la distance de l'objet vers le haut et vers la gauche à 50 %, mais si elle est définie sur 50 %, la boîte n'obtiendra pas réellement l'effet de centrage, donc définissez également margin-left:-200px;margin-top : -100px ;, voici une astuce, la valeur de margin-left est la moitié de la largeur, la valeur de margin-top est également la moitié de la hauteur de l'objet, et réglée sur négatif en même temps, ceci est réalisé Centré horizontalement et verticalement.

Pour plus d'articles liés à la question du centrage horizontal et vertical du HTML, veuillez faire attention au site Web PHP chinois !