vertical-align垂直居中

最新推荐文章于 2023-11-05 23:47:24 发布

小青龙8085

最新推荐文章于 2023-11-05 23:47:24 发布

阅读量265

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103981532

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

vertical-align：设置元素内容的垂直对齐，用于行内标签,可用于单元格td

语法：

效果展示：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			
			.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{
				background-color: #f2f2f2;
				height: 50px;
			}
			p{
				font-size: 25px;
			}
			.box1 span{
				font-size: 15px;
				vertical-align: baseline;
			}
			.box2 span{
				font-size: 15px;
				vertical-align: sub;
			}
			.box3 span{
				font-size: 15px;
				vertical-align: super;
			}
			.box4 span{
				font-size: 15px;
				vertical-align: top;
			}
			.box5 span{
				font-size: 15px;
				vertical-align: text-top;
			}
			.box6 span{
				font-size: 15px;
				vertical-align: middle;
			}
			.box7 span{
				font-size: 15px;
				vertical-align: bottom;
			}
			.box8 span{
				font-size: 15px;
				vertical-align: text-bottom;
			}
		</style>		
	</head>
	<body>
		<div class="box1">
			<p>基线baseline对齐<span>i love you</span></p>
		</div>
		<div class="box2">
			<p>sub垂直对齐<span>i love you</span></p>
		</div>
		<div class="box3">
			<p>super垂直对齐<span>i love you</span></p>
		</div>
		<div class="box4">
			<p>top垂直对齐<span>i love you</span></p>
		</div>
		<div class="box5">
			<p>text-top垂直对齐<span>i love you</span></p>
		</div>
		<div class="box6">
			<p>middle垂直对齐<span>i love you</span></p>
		</div>
		<div class="box7">
			<p>bottom垂直对齐<span>i love you</span></p>
		</div>
		<div class="box8">
			<p>text-bottom垂直对齐<span>i love you</span></p>
		</div>
		<p>-------------------------------------------------------------------------</p>
		<div style="height: 200px;width: 100%; background-color: #f2f2f2;display: table;text-align: center;">
			<div style="display: table-cell; vertical-align: middle;">
				<p>这是一行字（多行居中）</p>
				<p>这也是一行字</p>
			</div>
		</div>
		<div style="height: 200px;width: 100%; background-color: #f2f2f2;line-height:200px;text-align: center;">			
				<p>这是一行字(多行文字不能这样一起居中，这种方法只能当行文字居中)</p>
				<p>这也是一行字</p>		
		</div>
	</body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vertical-align垂直居中

vertical-align：设置元素内容的垂直对齐，用于行内标签,可用于单元格td语法：vertical-align ：baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比效果展示：代码：<!DOCTYPE html><html> <head> &...
复制链接

扫一扫