1

我有一个网格（在我的屏幕上，2 行：4 个框和 1 个框），我想根据屏幕的宽度在屏幕上居中。无论第一行有 4 个框还是 2 个框，都应该在屏幕中央。

我知道我可以用 javascript 实现这一点，但我的问题是 - 这在 CSS 中可以实现吗？

我有一些非常简单的代码和一个JSFiddle：

HTML

<div id="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>       
        <li></li>
        <li></li>
    </ul>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
}

ul{
    list-style-type: none;
    margin-top: 10px;
    margin-left: 10px;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
4

2 回答 2

2

香草 CSS 解决方案， http: //jsfiddle.net/MUaHz/3/：

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
    border: 1px solid #009900;
}

ul{
    list-style-type: none;
    margin-top: 10px;

    margin: 0 auto;
    border: 1px solid #000099;
    text-align: center;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
于 2013-06-09T08:05:26.420 回答
1

你可以使用这个

#container{
position: fixed; top: 50%; left: 50%; width: 93%; height: 200px;
}
ul li{
position: relative; top: -50%; left: -50%; width: 100%; 
height: 100%; background-color:red; color: white;
margin-bottom: 5px;
border: 1px solid black;
}

http://jsfiddle.net/modaloda/MUaHz/2/

看到这个链接：链接

于 2013-06-09T07:59:38.483 回答