Heim >Web-Frontend >CSS-Tutorial >So legen Sie die vertikale Ausrichtung von Absätzen mit CSS fest (Code im Anhang)
So legen Sie die vertikale Ausrichtung von Absätzen mit CSS fest (Code im Anhang)
- yuliaOriginal
- 2018-09-26 15:58:113137Durchsuche
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 e388a4556c0f65e1904146cc1a846bee 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>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>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!