So legen Sie die vertikale Ausrichtung von Absätzen mit CSS fest (Code im Anhang)-CSS-Tutorial-php.cn

So legen Sie die vertikale Ausrichtung von Absätzen mit CSS fest (Code im Anhang)

yulia

Freigeben： 2018-09-26 15:58:11

Original

3141 Leute haben es durchsucht

Wenn ich im Internet surfe, sehe ich oft einige Absätze, die vertikal ausgerichtet sind. In diesem Artikel erfahren Sie, wie Sie die vertikale Ausrichtung von Absätzen festlegen. Ich hoffe, dass dies der Fall ist hilfreich für Sie.

In CSS wird die vertikale Ausrichtung eines Absatzes durch das Attribut Vertical-Align festgelegt.

Beachten Sie, dass dieses Attribut für Elemente auf Blockebene wie

nicht funktioniert. Für Tabellen ist dieses Attribut jedoch sehr wichtig.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</body>
</html>
</span>

Nach dem Login kopieren

Der obige Code erstellt eine Tabelle mit 3 Zeilen und 2 Spalten. Die linke Spalte wird mit Bildern gefüllt, was die Höhe der Zellen erhöht und auch als Vergleich dient. Die Textspalte auf der rechten Seite von

übernimmt die obere Ausrichtung, die untere Ausrichtung bzw. die mittlere Ausrichtung. Die entsprechenden CSS-Werte sind oben, unten und mitte.

Wenn ein bestimmter Wert für das Vertical-Align-Attribut festgelegt ist, kann der Text selbst in vertikaler Richtung verschoben werden.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p>给对齐属性设置<span class="fs">具体</span>数值，负数</p>
</body>
</html>
</span>

Nach dem Login kopieren

Wie im obigen Code gezeigt, wird der Text um den entsprechenden Wert nach oben verschoben, wenn der Attributwert eine positive Zahl ist, und wenn er auf eine negative Zahl gesetzt ist, wird er nach unten verschoben.

Darüber hinaus hat das vertikale Attribut viele andere Werte, ist aber hauptsächlich auf Bilder anwendbar.

Das obige ist der detaillierte Inhalt vonSo legen Sie die vertikale Ausrichtung von Absätzen mit CSS fest (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!