You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.2 KiB
78 lines
2.2 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Die Eigenschaft vertical-align</title>
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<style type="text/css">
|
|
.test { line-height: 2; font-size: 4em;}
|
|
.test span {font-size: 0.3em;}
|
|
.baseline {vertical-align: baseline;}
|
|
.middle {vertical-align: middle;}
|
|
.sub {vertical-align: super;}
|
|
.text-top {vertical-align: text-top;}
|
|
.text-bottom {vertical-align: text-bottom;}
|
|
.percentage {vertical-align: 30%; }
|
|
.length {vertical-align: 30px;}
|
|
.top {vertical-align: top;}
|
|
.bottom {vertical-align: bottom;}
|
|
td {height:150px; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="test" style="border: 1px solid black">Gq
|
|
<span class="baseline">baseline</span>
|
|
|
|
<span class="middle">middle</span>
|
|
<span class="sub">sub</span>
|
|
<span class="super">super</span>
|
|
<span class="text-top">text-top</span>
|
|
|
|
<span class="text-bottom">text-bottom</span>
|
|
<span class="percentage">30%</span>
|
|
<span class="length">30px</span>
|
|
<span class="top">top</span>
|
|
|
|
<span class="bottom">bottom</span>
|
|
</div>
|
|
|
|
<div style="border: 1px solid black">
|
|
<img src="testbild.jpg" alt="testbild" width="50" eight="150">
|
|
<span class="baseline">baseline</span>
|
|
|
|
<span class="middle">middle</span>
|
|
<span class="sub">sub</span>
|
|
<span class="super">super</span>
|
|
<span class="text-top">text-top</span>
|
|
|
|
<span class="text-bottom">text-bottom</span>
|
|
<span class="percentage">30%</span>
|
|
<span class="length">30px</span>
|
|
<span class="top">top</span>
|
|
|
|
<span class="bottom">bottom</span>
|
|
</div>
|
|
|
|
<table style="border: 1px solid black">
|
|
<tr>
|
|
<td width="100">
|
|
<p>
|
|
Hier einfach mal ein wenig Text hin, um die Tabelle höher zu
|
|
bekommen. Und noch ein wenig Text, damit die Tabelle zur
|
|
Demonstration etwas höher wird.
|
|
</p>
|
|
</td>
|
|
<td class="baseline">baseline</td>
|
|
<td class="middle">middle</td>
|
|
|
|
<td class="percentage">30%</td>
|
|
<td class="length">30px</td>
|
|
<td class="top">top</td>
|
|
<td class="bottom">bottom</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|