经典实例:让多个横向的DIV居中(面试题)

作者:日期:2011-02-28 15:15:20 点击:328

多个DIV在父DIV内左右局中。父DIV980宽度,子DIV宽度100.可能1个可能9个,都要在980宽度DIV内左右局中,子DIV还要呈一行显示。(这个问题别人家延伸成4个小问题,包括了子DIV用浮动后内部的图片是否还能绝对居中的问题等等。我完全不会。记得是DIV,不是LI。LI我也知道一个文字居中就可以了。)
代码如下:
<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
  <style>
   .parent { width:980px;height:250px;margin:0 auto;text-align:center;background-color:#999;}
   .children {display:inline-block;width:100px;height:250px;}
   *+ html .children { display:inline;zoom:1;}
   * html .children { display:inline;zoom:1;}
  </style>
 </head>
 <body>
  <div class="parent">
   <div class="children" style="background-color:green;"></div>
   <div class="children" style="background-color:red;"></div>
   <div class="children" style="background-color:yellow;"></div>
   <div class="children" style="background-color:blue;"></div>
   <div class="children" style="background-color:green;"></div>
   <div class="children" style="background-color:red;"></div>
   <div class="children" style="background-color:yellow;"></div>
   <div class="children" style="background-color:blue;"></div>
   <div class="children" style="background-color:green;"></div>
  </div>
 </body>
</html>

上一篇: 经典实例:要求用CSS办法使图片上下左右都绝对居中(面试题)

下一篇: CSS经典实例:模拟position:fixed(面试题)