محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
 <style>
p {
 background: lightgray;
 font-size: 20px;
 line-height: 40px;
}
 
.baseline {
 vertical-align: baseline;
}

.text-top {
 vertical-align: text-top;
}

.text-bottom {
 vertical-align: text-bottom;
}

.top {
 vertical-align: top;
}

.bottom {
 vertical-align: bottom;
}

.middle {
 vertical-align: middle;
}

.sub {
 vertical-align: sub;
}

.super {
 vertical-align: super;
}

.length-positive {
 vertical-align: 10px;
}

.length-negative {
 vertical-align: -10px;
}

.percentage-positive {
 vertical-align: 15%;
}

.percentage-negative {
 vertical-align: -15%;
}
 
 </style>
	</head>
	<body>
 <h1>CSS vertical-align</h1>
 <img class="baseline" src="/tutorials/css/text/square.png"/> baseline
 <img class="text-top" src="/tutorials/css/text/square.png"/> text-top
 <img class="text-bottom" src="/tutorials/css/text/square.png"/> text-bottom
 <img class="top" src="/tutorials/css/text/square.png"/> top
 <img class="bottom" src="/tutorials/css/text/square.png"/> bottom
 <img class="middle" src="/tutorials/css/text/square.png"/> middle
 <img class="super" src="/tutorials/css/text/square.png"/> super
 <img class="sub" src="/tutorials/css/text/square.png"/> sub
 <img class="length-positive" src="/tutorials/css/text/square.png"/> length-positive
 <img class="length-negative" src="/tutorials/css/text/square.png"/> length-negative
 <img class="percentage-positive" src="/tutorials/css/text/square.png"/> percentage-positive
 <img class="percentage-negative" src="/tutorials/css/text/square.png"/> percentage-negative
	</body>
</html>