CSS—— vertical-align 与居中

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

BetterGG

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

阅读量317

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/BetterGG/article/details/82767402

版权

css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

效果图如下

注意：本文只讲了些 vertical-align 的应用，其基本原理以及应用原理见张鑫旭大神的讲解（我对CSS vertical-align的一些理解与认识）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

CSS深入理解vertical-align和line-height的基友关系：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.box1{
			width: 200px;
			height: 200px;
			border: solid 1px #f0f;
			margin: 20px auto;
			text-align: center;
		}
		.box1 i{
			height: 100%;
			display: inline-block;
			vertical-align: middle;
		}
		.box1 span{
			vertical-align: middle;
		}

		.box2{
			width: 200px;
			height: 200px;
			border: solid 1px #f0f;
			margin: 20px auto;
			text-align: center;
		}
		.box2 i{
			height: 100%;
			display: inline-block;
			vertical-align: middle;
		}
		.box2 div{
			display: inline-block;
			vertical-align: middle;
			text-align: left;
		}
	</style>
</head>
<body>
	<!-- 单行居中 -->
	<div class="box1">
		<i></i>
		<span>是啦放假啊是了发动机</span>
	</div>
	<div style="width: 100%; height: 10px"></div>

	<!-- 多行居中 -->
	<div class="box2">
		<i></i><div>
			<h3>爱上对方</h3>
			<span>撒发生的发生地方</span>
		</div>
	</div>
	<!-- 多行居中 -->
	<div class="box2">
		<i></i><div>
			<h3>爱上对方</h3>
			<span>撒发生的发生地方生的发生地方生的发生地方生的发生地方</span>
		</div>
	</div>
</body>
</html>

BetterGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS—— vertical-align 与居中

效果图如下注意：本文只讲了些 vertical-align 的应用，其基本原理以及应用原理见张鑫旭大神的讲解（我对CSS vertical-align的一些理解与认识）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7...
复制链接

扫一扫

专栏目录