CSS雜集（標準流&多行垂直居中）

時間 2019-11-12

標籤 css 雜集標準垂直居中欄目 CSS 简体版

原文原文鏈接

這部分網上教程說的較多，很少說了，放上代碼存檔。css

  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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>無標題文檔</title>
  6 <style type="text/css">
  7 body{
  8     font-size:12px;
  9     }
 10 #table1{
 11     border-collapse:collapse;
 12     }
 13 #table1 td,th{
 14     border: 1px #666 solid;
 15     }
 16 /*hack*/
 17 div#wrap {  
 18   display:table;  
 19   border:1px solid #FF0099;  
 20   background-color:#FFCCFF;  
 21   width:760px;  
 22   height:400px;  
 23   _position:relative;  
 24   *position:relative;
 25   overflow:hidden;  
 26 }  
 27 div#subwrap {  
 28   vertical-align:middle;  
 29   display:table-cell;  
 30   _position:absolute;  
 31   _top:50%;  
 32   *position:absolute;  
 33   *top:50%;  
 34 }  
 35 div#content {  
 36   _position:relative;  
 37   _top:-50%;  
 38 }
 39 /*hack*/
 40 </style>
 41 </head>
 42 
 43 <body>
 44 <h1>單行文本垂直居中</h1>
 45 <div style="border:2px #666 solid; background:#CCC; height:60px; line-height:60px; text-align:center;">
 46 單行文本居中比較簡單，只要容器的line-height和height等高便可。 height:60px; line-height:60px;
 47 </div>
 48 <hr />
 49 <h1>多行文本垂直居中</h1>
 50 <h2>approach1<blockquote>使用table佈局</blockquote></h2>.
 51 table佈局簡單易操做
 52 <table id="table1" cellpadding="0">
 53     <tr>
 54         <td height="60px" valign="top">垂直頂部</td>
 55         <td valign="middle">垂直居中，使valign="middle"屬性</td>
 56         <td style=" vertical-align:bottom">垂直底部，使style=" vertical-align:bottom"屬性</td>
 57     </tr>
 58 </table>
 59 <hr />
 60 <h2>approach2<blockquote>父容器高度不定</blockquote></h2>
 61 <div style=" border:1px #666 solid; background: #CCC; padding:30px;">
 62 <p>父容器高度不定的狀況下，使用padding是很是方便的作法</p>
 63 <p>padding:30px;</p>
 64 </div>
 65 <hr />
 66 <h2>approach3<small>父容器高度固定</small></h2>
 67 <div style="border:1px #666 solid; background: #CCC; height:100px; display:table;">
 68     <div style="border:1px #F00 solid; background:#FFCCFF; display:table-cell; vertical-align:middle;">
 69     父容器的父容器height:100px; display:table;<br/>
 70     f父容器display:table-cell; vertical-align:middle;<br/>
 71         CSS中有一個display屬性可以模擬&lt;table&gt;，可使用這個屬性來讓&lt;div&gt;模擬&lt;table&gt;，這樣就可使用vertical-align了。<br/>注意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，後者必須設置在子元素上，所以咱們要爲須要定位的文本再增長一個&lt;div&gt;元素。    
 72     </div>
 73 </div>
 74 <hr />
 75 <h2>approach3<small>使用絕對定位法</small></h2>
 76 <div style="border:1px solid #FF0099; background-color:#FFCCFF; height:150px; position:relative;">
 77 <div style="position:absolute; top:50%;">
 78 <div style="border:1px solid #000; position:relative; top:-50%;">
 79 使用絕對定位法實現多行文本垂直居中<br/>
 80 height:100px; position:absolute; top:50%; margin-top:-50px;<br />
 81 若是咱們對subwrap進行了絕對定位，那麼content也會繼承了這個屬性，雖然它不會在頁面中立刻顯示出來，可是若是再對content進行相對定位的時候，你使用的100%分比將再也不是content原有的高度。例如，咱們設定了subwrap的position爲40%，咱們若是想使content的上邊緣和wrap重合的話就必須設置top:-80%;那麼，若是咱們設定subwrap的top:50%的話，咱們必須使用100%才能使content回到原來的位置上去，可是若是咱們把content也設置50%呢？那麼它就正好垂直居中了。因此咱們可使用這中ernet Explorer 6,7中的垂直居中：<br/>
 82 沒有足夠空間時，content 會消失(相似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的狀況)
 83 </div>
 84 </div>
 85 </div>
 86 <div style="border:1px solid #FF0099; background-color:#FFCCFF; height:80px; position:relative;">
 87 <div style="position:absolute; top:50%;">
 88 <div style="border:1px solid #000; position:relative; top:-50%;">
 89 使用絕對定位法實現多行文本垂直居中<br/>
 90 height:100px; position:absolute; top:50%; margin-top:-50px;<br />
 91 若是咱們對subwrap進行了絕對定位，那麼content也會繼承了這個屬性，雖然它不會在頁面中立刻顯示出來，可是若是再對content進行相對定位的時候，你使用的100%分比將再也不是content原有的高度。例如，咱們設定了subwrap的position爲40%，咱們若是想使content的上邊緣和wrap重合的話就必須設置top:-80%;那麼，若是咱們設定subwrap的top:50%的話，咱們必須使用100%才能使content回到原來的位置上去，可是若是咱們把content也設置50%呢？那麼它就正好垂直居中了。因此咱們可使用這中ernet Explorer 6,7中的垂直居中：<br/>
 92 沒有足夠空間時，content 會消失(相似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的狀況)
 93 </div>
 94 </div>
 95 </div>
 96 <hr />
 97 <h2>approach4<small>hackv</small></h2>
 98 <div id="wrap">  
 99   <div id="subwrap">  
100     <div id="content">
101         <pre>如今咱們要使這段文字垂直居中顯示！  
102         </pre>
103     </div>  
104   </div>  
105 </div>  
106 </body>
107 </html>

至於float致使盒子模型超出標準流，之前不太明白，趁機寫個代碼強化一下。html

 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body>
 9 <div style="background:#FFF; width:760px;">
10     <div style="width:100%; height:30px; background:#F6F;">header</div>
11     <div style="width:30%; height:100px; float:left; background:#CCC;">div1</div>
12     <div style="width:40%; height:150px; float:left; background:#3C6;">div2</div>
13     <div style="width:30%; height:80px; float:left; background:#630;">div3</div>
14     <div style="clear:both"></div>
15     <div style="width:100; height:50px; background:#C36;">footer</div>
16 </div>
17 </body>
18 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。