Центрировать изображения при изменении размера окна

Question

Центрировать изображения при изменении размера окна

0

Я показываю много изображений. Когда размер окна изменяется, я хочу, чтобы можно было центрировать количество изображений, вписывающихся в окно. в настоящее время он выравнивается слева, когда изменяется окно браузера.

li {
    float:left; 
    display: inline-block;
    margin: 10px;
    width: 250px;
    max-width: 100%;
    text-align:center;
}

.itemS{
    max-width:1366px;   
    text-align:center;
    margin: 0 auto;
}
.itemS.itemType{
    width: 250px;
    padding:10px;
    background-color:#333;
    position:absolute;
    top:0px;
    text-align:center; 
}

Nathalia Maroot 08 май 2014, в 21:09

Источник

0

Не могли бы вы предоставить HTML? (Упрощенный)
blex 08 май 2014, в 18:30
0

<div class = "itemS"> <li> <div class = "itemType"> <input type = "image" src = 1stimge.jpg /> <gt_descA> 1-е описание </ gt_descA> </ div> </ li> </ DIV> </ DIV>
Nathalia Maroot 08 май 2014, в 18:36

Теги:

html

css

css3

1 ответ

Ещё вопросы

Не могли бы вы предоставить HTML? (Упрощенный)
<div class = "itemS"> <li> <div class = "itemType"> <input type = "image" src = 1stimge.jpg /> <gt_descA> 1-е описание </ gt_descA> </ div> </ li> </ DIV> </ DIV>

agrm · Answer 1 · 2014-05-08T16-33-00.000Z

Я считаю, что вам нужны CSS Media Queries. Вы устанавливаете точки останова в запросах, а когда окно браузера больше или меньше точки останова, применяются новые стили.

Если это ваш первоначальный стиль:

li {
    float:left; 
    display: inline-block;
}

Вы можете захотеть изменить div, когда окно браузера меньше 768, вы меняете стили таким образом:

@media all and (max-width: 768px) {
    li {
        float: none;
        margin: 0 auto;
    }
}

Подробнее читайте в CSS-Tricks или в этом ответе.

Надеюсь, это поможет вам в пути! Удачи!