中心3x3图像网格

我创建了一个网页，共9行，共3行。每行包含3个图像。我想将所有图像对齐到页面的中心。现在图像对齐左边。我试图写文本对齐：中心到<ul>元素没有成功。有任何想法吗？中心3x3图像网格

图像1图像2图像3

图像4图像5 image6

image7 image8图像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%; 
}

来源

2015-11-13 Minor Balulu

任何原因，你不希望一个表？ –

我会将'li's''position：relative'并将它们设置为'display：inline-block'。然后，您可以将父元素设置为具有以图像为中心的“text-align：center”，然后您可以将图像全部设置为“宽度：33％”，以确保每行只有3个图像 – Aeolingamenfel

@DanielA。白色，因为它不是1999年？ – Turnip

我建议完全不同的方法：

.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像素，让他们融入codepen屏幕。

来源

2015-11-13 19:54:34

像这也许......你是很近，li元素宽度分别设置为200像素，我改成了33％

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
ul { 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
} 
 
li { 
 
    background: url('http://lorempixel.com/150/75/sports/') center center; 
 
    background-size: cover; 
 
    width: 33%; 
 
    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%; 
 
}

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

来源

2015-11-13 20:07:34 LGSon

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

* { 
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; 
}

来源

2015-11-13 20:43:15 Dluks

我的解决方案类似于达米亚诺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>

来源

2015-11-14 00:35:13

中心3x3图像网格

回答

相关问题