css实现一行居中显示，两行靠左显示

最新推荐文章于 2024-04-22 15:38:52 发布

fanlinqiang

最新推荐文章于 2024-04-22 15:38:52 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/flqbestboy/article/details/76862102

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}
		span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;border:1px solid red;}
		i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;}
	</style>
</head>
<body>
	<div>
		<span>测试本测试本测试本测试本本测试本本测试本本测试本</span><i></i>  
		<!--
			text-align属性不适用于inline类型的标签，适用于块元素
			vertical-align 属性只适用于inline-block类型的便签


			这里span与i元素之间不能有空格否则垂直方向无法居中,
			原因可能是inline-block类型之间换行，浏览器解析时会将
			换行解析成空格，而span的元素的宽是自适应内容的宽度，即div的宽度
			致使span元素与i元素为 “上下关系”，而不是"左右并列"的关系，
			从而vertical-align不起作用
		-->
		
	</div>
</body>
</html>

以下为测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}
		span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;width:191px;}
		i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;width: 1px;}
	</style>
</head>
<body>
	<div>
		<span>测试本测试本测试本测试本本测试本本测试本本测试本</span>
		<i></i>  
		<!--
			span 与 i之间换行
			span width:191px
			i width:1px;
			200-191-1=8？

		-->
		
	</div>
</body>
</html>

fanlinqiang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现一行居中显示，两行靠左显示

Document div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;} span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;border:1px s
复制链接

扫一扫