文本或者图片在盒子中垂直居中

黑猫Sennyou

已于 2022-03-25 15:43:13 修改

阅读量1.9k

点赞数 2

分类专栏： html+css 文章标签： html css

于 2022-03-25 15:42:47 首次发布

本文链接：https://blog.csdn.net/csdn_491407692/article/details/123727205

版权

文本或者图片在盒子中垂直居中

文本垂直居中

padding

line-height

	<style>
	.text {
       
	    width: 500px;
	    height: 200px;
	    line-height: 200px;
	    background-color: #fff673;
	}
	.text p{
       
		line-height: 1.5;
		display: inline-block;
	}
	.text2 p {
       
	    line-height: 1.5;  /*行高；行间距*/
	    display: inline-block;  /*行内块元素*/
	    vertical-align: middle;  /*设置垂直对齐方式*/
	}
	</style>
	-------
	<body>
		<p>下面这句话是垂直居中的</p>
		<div class="text">
			<p>选择黄昏爆裂，嘲笑日出的自顾圣洁，乏味光辉</p>
		</div>
		<p>下面这段话也是垂直居中的</p>
		<div class="text text2">
			<p>
			满眼星辰，眉间落雪。满天星月是你的温柔，片片雪花是你的泪水。不管怎样，你是人间烟火，更是人间值得。
			</p>
		</div>
	</body</