邀朋友种豆,一起分享吧
喜欢购买正品行货?那就去品牌街

CSS DIV文字垂直居中完美解决方案

来自:种豆 时间:2017-12-29 阅读:640次 原文链接

1 CSS中为什么vertical-align属性不能使Div中的文字垂直居中?

    CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。
    W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”,也就是说:vertical-align只作用于在同一行内的元素。实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。

2 DIV中单行文字的垂直居中

    对于单行文字,只要保证div高和行高保持一致,就可以使用vertical-align使文字垂直居中了。示例如下:

//CSS 代码
#div_valign_middle_test{
  height:30px;
  line-height:30px;
  vertical-align:middle;
  overflow:hidden;
}

//Html代码
<div id="div_valign_middle_test"> 
  vertical-align:middle 单行文字垂直居中测试
</div>


    上面的代码中,使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。

3 DIV中多行文字的垂直居中

3.1 利用Table使Div多行文字垂直居中

    对于多行文字,上面的垂直居中的方法就不行了,可以在div里嵌套一个table,因为vertical-align:middle;对table的垂直居中是有效的。

<div>
 <table>
  <tr>
   <td >
     div中利用table的vertical-align:middle;属性实现多行文字的垂直居中功能。
   </td>
  </tr>
 </table>
</div>

3.2 利用Padding实现Div多行未知高度文字的垂直居中

    对于多行文字,如果不考虑容器高度,则可以定义 padding-bottom 和 padding-top ,使上下的padding值相同,也能实现div多行文字的垂直居中。这是一种“看起来居中”的垂直居中方式,它只是使文字把<div>完全填充。这种实现方式的特点如下:

优点:
  1. 同时支持块级和内联极元素
  2. 支持非文本内容
  3. 支持所有浏览器
缺点:
  容器不是固定高度

3.3 利用Display模拟Table实现div多行文字的垂直居中

    CSS中有一个display属性能够模拟<table>,可以使用这个属性来让<div>模拟<table>,这样就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素。

//CSS代码
div #wrap {   
   height:200px;   
   display:table;   
}   
div #content {   
   vertical-align:middle;   
   display:table-cell;  
 
   border:1px solid #FF0099;   
   background-color:#FFCCFF;   
   width:40px;
}

//Html代码
<div id="wrap">   
  <div id="content">
    <pre>
        display模拟table实现div多行文字垂直居中显示!     
    </pre>
  </div>   
</div> 

    但是Internet Explorer 6 不支持display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。

3.4 在IE6中实现div多行文字的垂直居中

    在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:

<div id="wrap">  
  <div id="subwrap">  
    <div id="content">  
    </div>  
  </div>  
</div>
    如果我们对subwrap进行了绝对定位,那么content也会继承了这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:

//CSS代码
div#wrap {  
  border:1px solid #FF0099;  
  background-color:#FFCCFF;  
  width:760px;  
  height:400px;  
  position:relative;  
}  
div#subwrap {  
  position:absolute;  
  border:1px solid #000;  
  top:50%;  
}  
div#content {  
  border:1px solid #000;  
  position:relative;  
  top:-50%;  
}

//Html代码
<div id="wrap">  
  <div id="subwrap">  
    <div id="content">
      <pre>
         现在我们要使这段文字垂直居中显示!   
      </pre>
    </div>  
  </div>  
</div> 

4 DIV中文字垂直居中的完美解决方案

    综合3.3和3.4两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:

//CSS代码
div#wrap {  
  display:table;  
  border:1px solid #FF0099;  
  background-color:#FFCCFF;  
  width:760px;  
  height:400px;  
  _position:relative;  
  overflow:hidden;  
}  
div#subwrap {  
  vertical-align:middle;  
  display:table-cell;  
  _position:absolute;  
  _top:50%;  
}  
div#content {  
  _position:relative;  
  _top:-50%;  
}

//Html代码
<div id="wrap">  
  <div id="subwrap">  
    <div id="content">
        <pre>现在我们要使这段文字垂直居中显示!  
        </pre>
    </div>  
  </div>  
</div> 

 
关于种豆 ┊ 联系我们 ┊ 免责声明 ┊ 发帖须知 ┊ 请提意见 ┊ 站点地图
本站为个人爱好兴趣分享网站,不代表本人观点,如有侵权请联系QQ3033380280进行处理
sowsoy.com 版权所有 Copyright©2010-2021 备案号:蜀ICP备2020025376号-3
Email:sowsoy#hotmail.com