欢迎光临
我们一直在努力

CSS | 多行文本垂直居中的两种方法

方法一:将父元素设置为table-cell元素

缺点:父元素设置table-cell后无法使用 margin,若要使用,需要在外面套一个div。

<div class="wrap">
	<p>你好喝完酒我好几万群殴为荷藕为和请叫我IE群殴我IE我去哦为好几千哦为我和噢气温!</p><span></span>
</div>

<style type="text/css">
	.wrap{
		width: 500px;
		height: 300px;
		border: 1px solid red;
		display: table-cell;
		vertical-align:middle
	}
</style>

方法二:将p标签转换为inline-block 并添加span辅助定位

<div class="box">
	<p>你好喝完酒我好几万群殴为荷藕为和请叫我IE群殴我IE我去哦为好几千哦为我和噢气温!</p><span></span>
</div>

<style type="text/css">
	.box{
		width: 300px;
		height: 300px;
		background-color: #00FF00;
	}
	.box p{
		display: inline-block;
		vertical-align: middle;
	}
	.box span{
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		width: 0;
	}
</style>
赞(2) 打赏
未经允许不得转载:散人研 » CSS | 多行文本垂直居中的两种方法
分享到: 更多 (0)

评论 抢沙发

9 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏