vertical-align垂直居中

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

语法:

vertical-align :baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比

效果展示:

 

代码: 

<!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>

 

发布了97 篇原创文章 · 获赞 9 · 访问量 7210
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览