我创建了一个网页,共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/