CSS实例教程之div竖直垂直居中的多种多样方式

日期:2020-12-12 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

在说到这个难题的情况下,或许有人会问CSS中并不是有vertical-align特性来设定竖直垂直居中的吗?即便是一些访问器不适用我只需做少量的CSS Hack技术性便可以啊!因此在这里我还要唠叨两句,CSS中确实是有vertical-align特性,可是它只对(X)HTML元素中有着valign特点的元素才起效,比如报表元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是沒有valign特点的,因而应用vertical-align对它们不起功效。

1、单行竖直垂直居中

假如1个器皿中仅有1写作字,对它完成垂直居中相对性较为简易,大家只必须设定它的具体高宽比height和所属行的高宽比line-height相同便可。

如:

CSS Code拷贝內容到剪贴板
  1. div {      
  2.         height:25px;      
  3.         line-height:25px;      
  4.         overflow:hidden;      
  5.  }      
  6.   

这段编码很简,后边应用overflow:hidden的设定是以便避免內容超过器皿或造成全自动换行,这样就达不到竖直垂直居中实际效果了。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 单写作字完成竖直垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div {   
  9.   height:25px;   
  10.   line-height:25px;   
  11.   border:1px solid #FF0099;   
  12.   background-color:#FFCCFF;   
  13.  }   
  14.   </style>  
  15.  </head>  
  16.  <body>  
  17.   <div>如今大家要使这段文本竖直垂直居中显示信息!</div>  
  18.  </body>  
  19. </html>  
  20.   

2、多行未知高宽比文本的竖直垂直居中

假如1段內容,它的高宽比是可变的那末大家便可以应用上1节讲到的完成水平垂直居中时应用到的最终1种方式,便是设置Padding,使左右的padding值同样便可。一样的,这也是1种“看起来”的竖直垂直居中方法,它只但是是使文本把<div>彻底填充的1种访求罢了。可使用相近下面的编码:

CSS Code拷贝內容到剪贴板
  1. div {      
  2.  padding:25px;      
  3. }      
  4.   

这类方式的优势便是它能够在任何访问器上运作,而且编码很简易,只但是这类方式运用的前提条件便是器皿的高宽比务必是可伸缩的。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多写作字完成竖直垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div {   
  9.   padding:25px;   
  10.   border:1px solid #FF0099;   
  11.   background-color:#FFCCFF;   
  12.   width:760px;   
  13.  }   
  14.   </style>  
  15.  </head>  
  16.  <body>  
  17.   <div><pre>如今大家要使这段文本竖直垂直居中显示信息!   
  18.    div {   
  19.   padding:25px;   
  20.   border:1px solid #FF0099;   
  21.   background-color:#FFCCFF;   
  22.  }   
  23. </pre></div>  
  24. </body>  
  25. </html>  
  26.   

3、多写作本固定不动高宽比的垂直居中

在本文的1刚开始,大家早已说过CSS中的vertical-align特性只会对有着valign特点的(X)HTML标识起功效,可是在CSS中也有1个display特性可以仿真模拟<table>,因此大家可使用这个特性来让<div>仿真模拟<table>便可以应用vertical-align了。留意,display:table和display:table-cell的应用方式,前者务必设定在父元素上,后者务必设定在子元素上,因而大家要为必须精准定位的文字再提升1个<div>元素:

CSS Code拷贝內容到剪贴板
  1. div#wrap {      
  2.     height:400px;      
  3.  display:table;      
  4. }      
  5. div#content {      
  6.   vertical-align:middle;      
  7.     display:table-cell;      
  8.    border:1px solid #FF0099;      
  9.  background-color:#FFCCFF;      
  10.  width:760px;      
  11. }     
  12.   
XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多写作字完成竖直垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div#wrap {   
  9.   height:400px;   
  10.   display:table;   
  11.  }   
  12.  div#content {   
  13.   vertical-align:middle;   
  14.   display:table-cell;   
  15.   border:1px solid #FF0099;   
  16.   background-color:#FFCCFF;   
  17.   width:760px;   
  18.  }   
  19.   </style>  
  20.  </head>  
  21.  <body>  
  22.  <div id="wrap">  
  23.   <div id="content"><pre>如今大家要使这段文本竖直垂直居中显示信息! Webjx.Com    
  24.  div#wrap {   
  25.   height:400px;   
  26.   display:table;   
  27.  }   
  28.  div#content {   
  29.   vertical-align:middle;   
  30.   display:table-cell;   
  31.   border:1px solid #FF0099;   
  32.   background-color:#FFCCFF;   
  33.   width:760px;   
  34.  }   
  35. </pre></div>  
  36. </div>  
  37.  </body>  
  38. </html>  
  39.   

这个方式应当是很理想化了,可是悲剧的是Internet Explorer 6 其实不能正确自然地理解display:table和display:table-cell,因而这类方式在Internet Explorer 6及下列的版本号中是失效的。嗯,这令人很烦闷!但是大家还其它的方法

4、在Internet Explorer中的处理计划方案

在Internet Explorer 6及下列版本号中,在高宽比的测算上存在着缺点的。在Internet Explorer 6中对父元素开展精准定位后,假如再对子元素开展百分比测算时,测算的基本好像是有承继性的(假如精准定位的标值是肯定标值沒有这个难题,可是应用百分比测算的基本将已不是该元素的高宽比,而从父元素承继来的精准定位高宽比)。比如,大家有下面这样1个(X)HTML编码段:

CSS Code拷贝內容到剪贴板
  1. <div id="wrap">     
  2.  <div id="subwrap">     
  3.    <div id="content">     
  4.  </div>     
  5. </div>   
  6. </div>   
  7.   

假如大家对subwrap开展了肯定精准定位,那末content也会承继了这个这个特性,尽管它不容易在网页页面中立刻显示信息出来,可是假如再对content开展相对性精准定位的情况下,你应用的100%分比将已不是content原来的高宽比。比如,大家设置了subwrap的position为40%,大家假如想使content的上边沿和wrap重叠的话就务必设定top:⑻0%;那末,假如大家设置subwrap的top:50%的话,大家务必应用100%才可以使content返回原先的部位上去,可是假如大家把content也设定50%呢?那末它就恰好竖直垂直居中了。因此大家可使用这中方式来完成Internet Explorer 6中的竖直垂直居中:

CSS Code拷贝內容到剪贴板
  1. div#wrap {      
  2.     border:1px solid #FF0099;      
  3.  background-color:#FFCCFF;      
  4.  width:760px;      
  5.   height:400px;      
  6.  position:relative;      
  7. }      
  8. div#subwrap {      
  9.   position:absolute;      
  10.     border:1px solid #000;      
  11.     top:50%;      
  12. }      
  13. div#content {      
  14.     border:1px solid #000;      
  15.     position:relative;      
  16.     top:⑸0%;      
  17. }      
  18.   

自然,这段编码只能在Internet Exlporer 6等测算存在难题的访问器中才会有功效。(但是我不解,我查阅了许多文章内容,不知道道是由于出处同样還是甚么缘故,好像许多人都不肯意去解释Internet Exlporer 6中这这个Bug的基本原理,我也只是掌握了1点毛皮,还要再科学研究)

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多写作字完成竖直垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div#wrap {   
  9.   border:1px solid #FF0099;   
  10.   background-color:#FFCCFF;   
  11.   width:760px;   
  12.   height:400px;   
  13.   position:relative;   
  14.  }   
  15.  div#subwrap {   
  16.   position:absolute;   
  17.   top:50%;   
  18.  }   
  19.  div#content {   
  20.   position:relative;   
  21.   top:⑸0%;   
  22.  }   
  23.   </style>  
  24.  </head>  
  25.  <body>    
  26.  <div id="wrap">  
  27.   <div id="subwrap">  
  28.    <div id="content"><pre>如今大家要使这段文本竖直垂直居中显示信息!   
  29.  div#wrap {   
  30.   border:1px solid #FF0099;   
  31.   background-color:#FFCCFF;   
  32.   width:760px;   
  33.   height:500px;   
  34.   position:relative;   
  35.  }   
  36.  div#subwrap {   
  37.   position:absolute;   
  38.   border:1px solid #000;   
  39.   top:50%;   
  40.  }   
  41.  div#content {   
  42.   border:1px solid #000;   
  43.   position:relative;   
  44.   top:⑸0%;   
  45.  }</pre>  
  46.   </div>  
  47.  </div>  
  48. </div>  
  49.  </body>  
  50. </html>  
  51.   

5、完善的处理计划方案

那末大家综合性上面两种方式便可以获得1个完善的处理计划方案,但是这要用到CSS hack的专业知识。针对假如应用CSS Hack来区别访问器,你可

以参照这篇“简易CSS hack:区别IE6、IE7、IE8、Firefox、Opera”:

CSS Code拷贝內容到剪贴板
  1. div#wrap {      
  2.     display:table;      
  3.     border:1px solid #FF0099;      
  4.  background-color:#FFCCFF;      
  5.  width:760px;      
  6.   height:400px;      
  7.  _position:relative;      
  8.    overflow:hidden;      
  9. }      
  10. div#subwrap {      
  11.     vertical-align:middle;      
  12.     display:table-cell;      
  13.    _position:absolute;      
  14.    _top:50%;      
  15. }      
  16. div#content {      
  17.    _position:relative;      
  18.    _top:⑸0%;      
  19. }      
  20.   

至此,1个完善的垂直居中计划方案就造成了。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> 多写作字完成竖直垂直居中 </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  6.   <style type="text/css">  
  7.  body { font-size:12px;font-family:tahoma;}   
  8.  div#wrap {   
  9.   display:table;   
  10.   border:1px solid #FF0099;   
  11.   background-color:#FFCCFF;   
  12.   width:760px;   
  13.   height:400px;   
  14.   _position:relative;   
  15.   overflow:hidden;   
  16.  }   
  17.  div#subwrap {   
  18.   vertical-align:middle;   
  19.   display:table-cell;   
  20.   _position:absolute;   
  21.   _top:50%;   
  22.  }   
  23.  div#content {    
  24.   _position:relative;   
  25.   _top:⑸0%;   
  26.  }   
  27.   </style>  
  28.  </head>  
  29.  <body>  
  30.  <div id="wrap">  
  31.   <div id="subwrap">  
  32.    <div id="content"><pre>如今大家要使这段文本竖直垂直居中显示信息!   
  33.  div#wrap {   
  34.   border:1px solid #FF0099;   
  35.   background-color:#FFCCFF;   
  36.   width:760px;   
  37.   height:500px;   
  38.   position:relative;   
  39.  }   
  40.  div#subwrap {   
  41.   position:absolute;   
  42.   border:1px solid #000;   
  43.   top:50%;   
  44.  }   
  45.  div#content {   
  46.   border:1px solid #000;   
  47.   position:relative;   
  48.   top:⑸0%;   
  49.  }</pre>  
  50.   </div>  
  51.  </div>  
  52. </div>  
  53.  </body>  
  54. </html>  
  55.   

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。