suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS-Tutorial: Mehrere Methoden zur vertikalen Zentrierung von Divs

CSS-Tutorial: Mehrere Methoden zur vertikalen Zentrierung von Divs

高洛峰
高洛峰Original
2017-03-13 17:50:421298Durchsuche

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>, b4d429308760b6c2d20d6300079ed38e, 63bd76834ec05ac1f4c0ebbeaafb0994 usw. Elemente wie e388a4556c0f65e1904146cc1a846bee, 45a2772a6b6107b401db3c9b82c049c2 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;      
 }

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>


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 e388a4556c0f65e1904146cc1a846bee vollständig ausfüllt. Sie können Code ähnlich dem folgenden verwenden: 

p {      
 padding:25px;      
}

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

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 f5d188ed2c074f8b944552db028f98a1 simulieren kann Wir können dieses Attribut verwenden, um e388a4556c0f65e1904146cc1a846bee 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 e388a4556c0f65e1904146cc1a846bee-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;      
}
<!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;   
 }


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>

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


当然，这段代码只能在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%;   
 }

五、完美的解决方案


那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到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%;      
}


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

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


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

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!

Stellungnahme：
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
Vorheriger Artikel：Zusammenfassung gängiger Methoden zum Teilen von DIV+CSS zum Löschen von FloatingNächster Artikel：Zusammenfassung gängiger Methoden zum Teilen von DIV+CSS zum Löschen von Floating

In Verbindung stehende Artikel

Mehr sehen