揭秘CSS(第 1 版)
3.2.5 垂直对齐
阅读(

vertical-align属性效果演示

vertical-align

属性取值:










HTML代码:

<p class="vertical-align">xgh<span>baseline</span><span>sub</span><span>super</span><span>top</span><span>text-top</span><span>middle</span><span>bottom</span><span>text-bottom</span></p>

CSS代码:

.vertical-align  {
	border-radius: 8px;
	text-align: center;
	line-height: 1.8;
	font-size: 90px;
	font-family: "Times New Roman";
}
 .vertical-align span  {
	color: #00f;
	font-size: 20px;
}
 .vertical-align span: nth-child(1)  {
	vertical-align: baseline;
}
 .vertical-align span: nth-child(2)  {
	vertical-align: sub;
}
 .vertical-align span: nth-child(3)  {
	vertical-align: bottom;
}
 .vertical-align span: nth-child(4)  {
	vertical-align: text-bottom;
}
 .vertical-align span: nth-child(5)  {
	vertical-align: middle;
}
 .vertical-align span: nth-child(6)  {
	vertical-align: super;
}
 .vertical-align span: nth-child(7)  {
	vertical-align: text-top;
}
 .vertical-align span: nth-child(8)  {
	vertical-align: top;
}

运行效果:

xghbaselinesubsupertoptext-topmiddlebottomtext-bottom

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验