Центр 3x3 изображений сетки

Я создал веб-страницу с 9 изображениями всего в 3 строках. Каждая строка содержит 3 изображения. Я хочу выровнять все изображения в центре страницы. Теперь изображения выравниваются влево. Я попытался написать text-align: center к элементу <ul> без успеха. Есть идеи?Центр 3x3 изображений сетки

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%; 
}

источник

2015-11-13 Minor Balulu

какой-либо причине вы не хотите таблицу? –

Я бы сделал 'li' '' position: relative' и установил их как 'display: inline-block'. Затем вы можете установить родительский элемент с 'text-align: center', который будет центрировать изображения, а затем вы можете иметь все изображения' width: 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 * 100px, чтобы они поместились в codepen экран.

источник

2015-11-13 19:54:34

Как это возможно ... Вы были близки, то li элементы ширины были установлены на 200px, я изменил его на 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 изображений сетки

ответ

Смежные вопросы