我创建了一个网页,共3行,共9张图片。每行包含3张图像。我想将所有图像对准页面中心。现在,图像向左对齐。我试图将text-align:居中到<ul>元素,但没有成功。有任何想法吗?



image1 image2 image3

image4 image5 image6

image7 image8 image9



的HTML:

<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>


CSS:

* {
    margin:0;
    padding:0;
}

ul {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
li {
    background: url('img/house.jpg') center;
    background-size: cover;
    width: 200px;
    height: 200px;
    top:33%;
    list-style:none;
    position:absolute;
    border: 1px solid red;
}

li:nth-child(-n+3) {
    top:0;

}
li:nth-child(n+7) {
    top:66%;

}
li:nth-child(3n+2) {
    left:33%;

}
li:nth-child(3n+3) {
    left:66%;
}

最佳答案

我建议完全不同的方法:

.item {
 margin:3px;
 background:url('http://vignette2.wikia.nocookie.net/lookout
 /images/f/f4/Nice-house-  slc.jpg/revision/latest?cb=20120526042017')
 center;
 background-size: 100% 100%;
 width: 200px;
 height:200px;
 border: 1px solid red;
 }


http://codepen.io/damianocel/pen/XmoPQq

我将图片设为100 * 100px,因此它们适合Codepen屏幕。

关于html - 中心3x3图像网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33699849/

10-09 05:41
查看更多