gpt4 book ai didi

html - 中心 3x3 图像网格

转载 作者:行者123 更新时间:2023-11-28 06:52:21 25 4
gpt4 key购买 nike

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


图片1 图片2 图片3

图片4 图片5 图片6

图片7 图片8 图片9


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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com