经典实例：让多个横向的DIV居中（面试题）
2011-02-28 15:15:20
435
多个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>
