Bootstrap

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

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

文本垂直居中

  1. padding

  2. 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</
;