中心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圖像網格

回答

相關問題