實現多行文本垂直居中

方法一:

1. 對父元素設置display:table屬性
2. 對文本設置display:table-cell和vertical-align:middle屬性 

	<style>
		.box{
			width: 500px;
			height: 500px;
			display: table;
			border: 1px solid #333;
		}
		.box p{
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<body>
		<div class="box">
			<p>多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中</p>
		</div>
	</body>

 

方法二:

1.對父元素設置的line-height:等於父元素的高度

2.對文本設置display:inline-block;vertical:middle;line-heigh:20px;(覆蓋父元素的line-height)

	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 1px solid #333;
			line-height: 500px;
		}
		.box p{
			display: inline-block;
			line-height: 20px;
			vertical-align: middle;
		}
	</style>
	<body>
		<div class="box">
			<p>多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中</p>
		</div>
	</body>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章