Question

我创建了一个共有9个图像的网页，共3行。每行包含3个图像。我想将所有图像对齐到页面的中心。现在图像对齐左侧。我试图将text-align：center写入<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%;
}

Answer 1

我建议使用完全不同的方法：

.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 * 100像素的照片，因此它们适合于编码屏幕。

Answer 2

使用这种方法，你需要使用断点来定义依赖于视口宽度的边距，但我认为这是一个更简单的解决方案。

* {
margin:0;
padding:0;
}
ul {
    position: absolute;
    top: 33%;
    text-align: center;
}
li {
    display: inline-block;
    background: url('http://placehold.it/200') center no-repeat;
    width: 200px;
    height: 200px;
    margin: 0 5% 5% 5%;
    background-size: cover;
    list-style:none;
    border: 1px solid red;
}

Answer 3

我的解决方案类似于 damiano celent ，因为我也使用了flexbox，但我也为您提供了响应式设计的基础（我猜你以后会想要的）。

此版本还会调整较小/较大的图像大小以适合框中。该片段已被评论，但如果您想获得更多支持，请发表评论！

BTW 将您的ul和li更改为div，您会看到它仍能正常运行。那是班级发挥作用的地方......

/* some globals with width and height
   so elements have a frame of reference */
html,body { 
    width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; cursor: default
}
body {
    max-width: 100%; max-height: 100%; margin: 0 auto
}
ul,li {
    list-style: none; padding: 0
}
.container-flex {
    /* Define as a flex container, centering its descendents */
    display: flex; 
    justify-content: center; align-items: center;
    height: 100%; width: auto
}
/* Any direct descendent will resize (not only UL works) */
.img-list-flex {
    /* Define as a flex container, centering its descendents */
    display: inline-flex; flex-flow: row wrap;
    justify-content: center; align-items: center; align-content: center;

    /* 1/3 of viewport width */
    width: calc(100vw/3); 
    height: calc(100vw/3); 
}
/* Any direct descendent will resize (not only LI works) */
.img-list-flex > * {
    background: #fafafa; border: 1px solid red;

    /* 1/3 of parent width minus 3 x 2 x 2px margin */
    width:  calc(100%/3 - 12px);
    height: calc(100%/3 - 12px); 
    
    /* Some space around the item */
    margin: 2px;

    /* Works for desktop, but needs media queries
       to set mobile/tablet/desktop limits */
     max-width: 200px;
    max-height: 200px;

    /* chop excess data */
    overflow: hidden;
}
/* if an img-list-flex item contains an image, then */
.img-list-flex > * > img {
    min-width: 100%; /* stretch smaller images */
    max-width: 100%; /* shrink larger images */
    height: auto;    /* adjust image height accordingly */
}

<div class="container-flex">
    <ul class="img-list-flex">
        <li><img src="http://dummyimage.com/100"/></li>
        <li><img src="http://dummyimage.com/200"/></li>
        <li><img src="http://dummyimage.com/300"/></li>
        <li><img src="http://dummyimage.com/400"/></li>
        <li><img src="http://dummyimage.com/500"/></li>
        <li><img src="http://dummyimage.com/200"/></li>
        <li><img src="http://dummyimage.com/200"/></li>
        <li><img src="http://dummyimage.com/200"/></li>
        <li><img src="http://dummyimage.com/200"/></li>
    </ul>
</div>

中心3x3图像网格

3 个答案: