多行文字居中

最新推荐文章于 2021-03-16 20:32:31 发布

转载最新推荐文章于 2021-03-16 20:32:31 发布 · 140 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b02c0e35188253064656891

本文介绍了三种CSS居中方法：单行文字通过设置line-height实现；多行文字利用table-cell属性和table布局结合；以及通过line-height配合inline-block实现。这些方法各有优缺点，并对浏览器兼容性进行了讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对之前css居中的一点补充

1. 单行文字居中

设置line-height等于元素高度即可

2. 多行文字居中

2.1 table-cell里对span居中

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#right{
		width: 100px;
		height: 200px;
		text-align: center;
		
		display: table-cell;
		
		vertical-align: middle;
		background-color: blue;
	}
	#right span{
	
		display: inline-block;
		vertical-align: middle;
		
	}
</style>
<div id="right">
    <span>这是内容这是内容这是内容这是内容这是内容</span>
</div>
复制代码

用一个span标签将所有的文字封装起来，但缺点是外部div不能用浮动

2.2 table和table-cell结合

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#con{
		width: 500px;
		height: 200px;
		margin: 20px auto;
		background-color: gray;
		display: table;
	}
	.right{
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		background-color: blue;
	}
</style>
<div id="con">
    <div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
    <div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
    <div class="right"><span>这是内容这是内容这是内容这是内容</span></div>
</div>
复制代码

缺点是不兼容ie6和ie7

2.3 line-height

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.right{
		width: 100px;
		height: 200px;
		margin: 20px auto;
		background-color: gray;
		text-align: center;
		vertical-align: middle;
		line-height: 200px;    /*父元素设置等高行高*/
	}
	.right span{
		display:inline-block;       /*子元素设置inline-block*/
     	line-height: 20px;			/*覆盖父级元素的行高*/
     	vertical-align: middle;		/*基线居中对齐*/
	}
</style>
<div class="right">
		<span>这是内容这是内容这是内容这是内容</span>
	</div>
复制代码

此方法能够很好地兼容IE6/7，但是文本的高度不能超过外部盒子的高度，如果超过盒子高度，此设置将不会有效果