单行文字垂直居中,多行文字垂直居中

这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法:

一、单行文字居中

原理:
       使用height 和 line-height,相等的原理。

二、多行文字居中

原理:
       将多行文字当做一张图片去处理,使其居中。

代码:

	<html>
	    <head>
	    <title>Mr企鹅先森</title>   
	    <style type="text/css">
	       html{
	          font-size: 14px;  
	       }
	      .only{
	          border: 1px solid red;
	          padding: 10px 10px;
	          height: 30px;
	          line-height: 30px;
	      }
	      .box_2{
	        display: table-cell;
	        width: 550px;
	        height: 1.14rem;
	        padding: 2rem 2rem;
	        border: 4px solid #beceeb;
	        color: #069;
	        font-size: 10rem;
	        vertical-align: middle;
	       }
	      .word{
	        display:inline-block; 
	        font-size:0.1rem; 
	       }
	    </style>
	    </head>
	    <body>
	        <div class="only">111111111</div>
	        <div class="box_2">
	            <span class="word">
	                这里显示多行文字。vrbrtbtrnyynnnnnnnnnnnnnnnnnnnnnnnnnnnn
	                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnbntrsssssssssssssssss
	                gerrfewe23e23r3433g43g343fr2323r23nnnnnnnnnnnnnnnnnnry
	                 ooooooooooooooooooooooooooooooooooooooooooooooooooooo</span>
	        </div>
	    </body>      
	</html>

效果

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值