1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <!-- saved from url=(0065)http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html -->
3 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
5 <title>CSS Vertical Centre</title>
6
7 <style media="all" type="text/css">
8
9 html, body {height:100%; margin:0; padding:0;}
10
11 html {font-size:0.75em;}
12
13 .column {float:left; width:19.5%; background-color:#B0C953; height:100%; border-right:2px dashed #fff; position:relative;}
14
15 .content {background-color:#fff; padding:20px; margin:10px; display:block;}
16
17 .label {position:absolute; padding:10px; background-color:#fff; opacity:0.4; margin:5px;}
18 .label:hover {opacity:0.7;}
19 .label p {margin:0.2em; padding:0;}
20
21 .good {color:#009900;}
22 .bad {color:#FF3300;}
23
24 #floater3 {float:left; height:50%; margin-bottom:-120px; width:100%; background-color:#DDF879;position:relative;}
25 #content3 {clear:both; height:240px; /*z-index:32;*/ position:relative;}
26
27
28 code {background-color:#ddd; padding:3px; line-height:1.7em;}
29 ul {margin:0; padding:0; padding-left:1em;}
30
31 </style>
32
33 </head>
34
35 <body>
36
37 <div class="column">
38
39 <div id="floater3"></div>
40
41 <div class="label">
42 <code>
43 float:left;<br>
44 height:50%;<br>
45 margin-bottom:-120px;
46 </code>
47 </div>
48
49 <div id="content3" class="content">
50 <p><code>position:relative; clear:left; height:240px;</code></p>
51 <ul>
52 <li class="good">Works in all browsers</li>
53 <li>Fixed Height (can be ems)</li>
54 <li class="good">Doesn't get cut off when there isn't enough space</li>
55 <li class="bad">Uses 1 extra empty <code>div</code> (not too bad)</li>
56 </ul>
57 </div>
58
59 </div>
60
61 </body>
62
63 </html>
引自: http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。