CSS-Tutorial: Mehrere Methoden zur vertikalen Zentrierung von Divs-CSS-Tutorial-php.cn

In diesem Artikel werden hauptsächlich die verschiedenen Methoden zur vertikalen Zentrierung von p im CSS-Tutorial ausführlich vorgestellt, einschließlich der Methode zur vertikalen Zentrierung von mehrzeiligem Text. Interessierte Freunde können sich darauf beziehen

darüber sprechen Auf diese Frage fragen sich einige Leute vielleicht, ob es in CSS das Attribut vertical-align gibt, um die vertikale Zentrierung festzulegen? Auch wenn einige Browser dies nicht unterstützen, muss ich nur ein wenig CSS-Hack-Technologie anwenden! Deshalb muss ich hier ein paar Worte sagen. Es gibt zwar ein Vertical-Align-Attribut in CSS, aber es wird nur für Elemente mit dem Valign-Attribut im (X)HTML-Element wirksam, wie zum Beispiel < in Tabellenelemente. ;td>, , usw. Elemente wie

, haben keine valign-Attribute, daher funktioniert die Verwendung von Vertical-Align nicht.

1. Einzeilige vertikale Zentrierung

Wenn sich in einem Container nur eine Textzeile befindet, ist es relativ einfach, diese zu zentrieren seine tatsächliche Höheheight kann gleich der Höhe der Linie line-height sein.

Zum Beispiel:

p {      
        height:25px;      
        line-height:25px;      
        overflow:hidden;      
 }

Nach dem Login kopieren

Dieser Code ist sehr einfach. Die Einstellung overflow:hidden wird später verwendet, um zu verhindern, dass der Inhalt den Container überschreitet, oder um einen automatischen Zeilenumbruch zu ermöglichen, sodass die vertikale Zentrierung gewährleistet ist Wirkung kann nicht erreicht werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 单行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  height:25px;   
  line-height:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }   
  </style>
 </head>
 <body>
  <p>现在我们要使这段文字垂直居中显示！</p>
 </body>
</html>

Nach dem Login kopieren

2. Vertikale Zentrierung mehrerer Textzeilen unbekannter Höhe

Wenn ein Inhalt seine Höhe variabel ist, können wir die letzte im vorherigen Abschnitt erwähnte Methode zur horizontalen Zentrierung verwenden, bei der Padding so eingestellt wird, dass die oberen und unteren Padding-Werte gleich sind. Auch hier handelt es sich um eine Möglichkeit, eine vertikale Zentrierung zu „sehen“, es geht lediglich darum, dass der Text das

vollständig ausfüllt. Sie können Code ähnlich dem folgenden verwenden:

p {      
 padding:25px;      
}

Nach dem Login kopieren

Der Vorteil dieser Methode besteht darin, dass sie in jedem Browser ausgeführt werden kann und der Code sehr einfach ist, aber die Voraussetzung für die Anwendung dieser Methode ist dies Die Höhe des Behälters muss einziehbar sein.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
  <p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
   p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }

Nach dem Login kopieren

3. Zentrierung von mehrzeiligem Text mit fester Höhe

Zu Beginn dieses Artikels haben wir bereits über die vertikale Ausrichtung gesprochen. align-Attribut in CSS Es funktioniert nur auf dem (X) HTML-Tag mit dem valign-Attribut, aber es gibt auch ein display-Attribut in CSS, das

simulieren kann Wir können dieses Attribut verwenden, um

zu simulieren, und Sie können Vertical-Align verwenden. Beachten Sie, dass bei Verwendung von display:table und display:table-cell Ersteres für das übergeordnete Element und Letzteres für das untergeordnete Element festgelegt werden muss. Daher müssen wir ein weiteres

-Element für den Text hinzufügen muss positioniert werden:

p#wrap {      
    height:400px;      
 display:table;      
}      
p#content {      
  vertical-align:middle;      
    display:table-cell;      
   border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
}

Nach dem Login kopieren

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！ Webjx.Com    
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }

Nach dem Login kopieren

Diese Methode sollte ideal sein, aber leider versteht Internet Explorer 6 display:table und display:table-cell nicht richtig . Daher ist diese Methode in Internet Explorer 6 und niedriger ungültig. Nun, das ist deprimierend! Aber wir haben andere Methoden

4. Lösung im Internet Explorer

In Internet Explorer 6 und niedriger gibt es Fehler in der Berechnung der Höhe. Wenn nach der Positionierung des übergeordneten Elements in Internet Explorer 6 die Prozentberechnung für das untergeordnete Element durchgeführt wird, scheint die Berechnungsbasis vererbt zu sein (wenn der Positionierungswert ein absoluter Wert ist, gibt es kein solches Problem, sondern die Verwendung der Prozentberechnungsbasis). wird Es ist nicht mehr die Höhe des Elements, sondern die vom übergeordneten Element geerbte Positionierungshöhe. Wir haben zum Beispiel das folgende (X) HTML-Code-Snippet:

<p id="wrap">     
 <p id="subwrap">     
   <p id="content">     
 </p>     
</p>   
</p>

Nach dem Login kopieren

Wenn wir eine absolute Positionierung für Subwrap durchführen, erbt der Inhalt auch dieses Attribut, obwohl dies der Fall ist nicht sofort auf der Seite angezeigt, aber wenn Sie den Inhalt relativ positionieren, entspricht das von Ihnen verwendete 100-Prozent-Verhältnis nicht mehr der ursprünglichen Höhe des Inhalts. Beispielsweise legen wir die Position des Unterumbruchs auf 40 % fest. Wenn wir möchten, dass die Oberkante des Inhalts mit dem Umbruch übereinstimmt, müssen wir dann oben festlegen , wenn wir beim Festlegen von top:50 % des Subwraps 100 % verwenden müssen, um den Inhalt an seine ursprüngliche Position zurückzubringen, aber was ist, wenn wir den Inhalt auch auf 50 % setzen? Dann ist es genau vertikal zentriert. Mit dieser Methode können wir also eine vertikale Zentrierung im Internet Explorer 6 erreichen:

p#wrap {      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 position:relative;      
}      
p#subwrap {      
  position:absolute;      
    border:1px solid #000;      
    top:50%;      
}      
p#content {      
    border:1px solid #000;      
    position:relative;      
    top:-50%;      
}

Nach dem Login kopieren

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  top:50%;   
 }   
 p#content {   
  position:relative;   
  top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

Nach dem Login kopieren

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可

以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

p#wrap {      
    display:table;      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 _position:relative;      
   overflow:hidden;      
}      
p#subwrap {      
    vertical-align:middle;      
    display:table-cell;      
   _position:absolute;      
   _top:50%;      
}      
p#content {      
   _position:relative;      
   _top:-50%;      
}

Nach dem Login kopieren

至此，一个完美的居中方案就产生了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  display:table;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  _position:relative;   
  overflow:hidden;   
 }   
 p#subwrap {   
  vertical-align:middle;   
  display:table-cell;   
  _position:absolute;   
  _top:50%;   
 }   
 p#content {    
  _position:relative;   
  _top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

Nach dem Login kopieren

以上就是本文的全部内容，希望对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonCSS-Tutorial: Mehrere Methoden zur vertikalen Zentrierung von Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

css div 垂直居中

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung gängiger Methoden zum Teilen von DIV+CSS zum Löschen von Floating Nächster Artikel：CSS überschreitet die angegebene Textbreite und verwendet stattdessen Ellipsen und der Text wird nicht umbrochen.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors