Problem mit der horizontalen und vertikalen Zentrierung von HTML-HTML-Tutorial-php.cn

Problem mit der horizontalen und vertikalen Zentrierung von HTML

高洛峰

Freigeben： 2017-02-24 10:41:26

Original

1399 Leute haben es durchsucht

Ich bin in letzter Zeit auf viele Zentrierungsprobleme gestoßen, deshalb habe ich mir die Zeit genommen, sie hier zusammenzufassen, damit sie in Zukunft leicht gefunden werden können

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

Nach dem Login kopieren

ps:text-align:center zentriert das Inline-Element einfach unter dem Element
1.2 display:table -cell (mehrzeilige feste Höhe zentriert)

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

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

Nach dem Login kopieren

ie67: (Ich werde es nicht verwenden in die Zukunft, aber ich werde es hier einfügen. )
Methode 1: (Die Höhe des em-Tags ist gleich der Höhe des übergeordneten Elements, daher ist die Zentrierungsspanne und das em äquivalent zur Zentrierungsspanne auf dem übergeordneten Element)

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

Nach dem Login kopieren

Methode 2: (Durch Hinzufügen eines absolut positionierten übergeordneten Tags zum untergeordneten Element und anschließendes Anpassen der relativen Positionierung des untergeordneten Elements, um es horizontal zu zentrieren vertikal)

<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:-%;
}

Nach dem Login kopieren

1.3Polsterung (Innenpolsterung, selbstverständlich)

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

Nach dem Login kopieren

2. Zentriertes Element

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

Nach dem Login kopieren

2.1Position: Absolut+Rand negativer Wert (Breite und Höhe müssen zur Berechnung des Randes verfügbar sein)

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

Nach dem Login kopieren

ps: CSS implementiert p horizontale Zentrierung und vertikale Zentrierung nach oben und unten

<!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>

Nach dem Login kopieren

Einführung in das Prinzip der horizontalen und vertikalen Zentrierung
Absolute Positionierungsposition:absolut wird hier verwendet und top, um den Objektabstand auf 50 % zu setzen, aber wenn er auf 50 % eingestellt ist, erreicht die Box nicht wirklich den Zentrierungseffekt, also setzen wir margin-left:-200px;margin-top:-100px; Hier ist der Wert von margin-left die halbe Breite und der Wert von margin-top ist auch die halbe Höhe des Objekts. Gleichzeitig wird er auf negativ gesetzt, sodass eine horizontale und vertikale Zentrierung erreicht wird.

Weitere Artikel zum Thema horizontale und vertikale Zentrierung von HTML finden Sie auf der chinesischen PHP-Website!