如何在CSS上垂直对齐文本？
CSS中的
vertical-align 属性用于定义内联或表格的垂直对齐。
vertical-align CSS属性控制元素如何彼此相邻设置。当此属性应用于表格单元格时，它会影响单元格内容，而不是影响单元格本身。
此属性具有多个有效值：
baseline, top, bottom, middle, text-top, text-bottom, sub, super，和
length(，以
px，cm，em，等。
）。此属性的
sub 和
super 值通常用于下标和上标。
此
CSS 属性可用于对齐垂直表格中单元格的内容。它可以使图像在一行文本中垂直对齐。此属性不能用于垂直对齐块级元素。
让我们通过使用一些插图来了解此属性。
示例
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 2px solid red;
border-collapse: collapse;
font-size: 20px;
}
#super{
vertical-align: super;
}
#sub{
vertical-align: sub;
}
</style>
</head>
<body>
<table>
<td style="vertical-align: baseline;">baseline</td>
<td style="vertical-align: middle;">middle</td>
<td style="vertical-align: bottom;">bottom</td>
<td style="vertical-align: top;">top</td>
<td style="vertical-align: text-top;">Hi, Welcome to the lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.com is always providing an easy and in-depth tutorial on various technologies. </td>
</table>
<h2> Use of super and sub values </h2>
<h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3>
<h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>
</body>
</html>
输出
现在，还有另一个示例，其中我们将文本与图像对齐。
示例
<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size: 20px;
border: 2px solid red;
}
img{
width:150px;
height: 100px;
}
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
img.middle {
vertical-align: middle;
}
</style>
</head>
<body>
<div>An <img src="rose.png" /> image with a default alignment.</div>
<div>An <img class="bottom" src="rose.png" /> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="rose.png" /> image with a middle alignment.</div>
<div>An <img class="top" src="rose.png" /> image with a text-top alignment.</div>
</body>
</html>
输出
