Как выровнять массив картинок строго слева или по центру?

Question

Нужно разместить картинки по центру.

Вот что получается вообще:

Слева получается отступ.

HTML:

<div class="portfolio_popup visible" id="portfolio">
    <button type="button" class="close_btn"></button>
    <div class="popup_images_array" id="imagesArray">
      <div><img src="img/main.jpg"></div>
      <div><img src="img/service.jpg"></div>
      <div><img src="img/service_2.jpg"></div>
      <div><img src="img/services.jpg"></div>
    </div>
</div>

CSS:

.popup_images_array {
    column-count: 5;
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-gap: 20px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
}
.popup_images_array div {
    padding: 10px 0;
}
.popup_images_array img {
    display: block;
    width: 100%;
    height: auto;
}

Нужно выровнять массив картинок строго слева или по центру.

Answer 1

Если их просто надо центрировать то можно воспользоваться FlexBox.

.main {
    width: 100%;
    height: 300px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    /*justify-content: center; - тогда они слипнуться в центре и не будут распределятся по всей ширине*/
    background-color: blue;
    /*align-items: center; - если надо центрировать вертикально*/
}

.main img {
    height: 150px;
    width: 30px;
    background-color: red;
}

<div class="main">
    <img src="" alt="Фото">
    <img src="" alt="Фото">
    <img src="" alt="Фото">
    <img src="" alt="Фото">
</div>

Если нужен перенос строк например, советую прочитать документацию о FlexBox

Например тут: https://html5book.ru/css3-flexbox/

БЛОГ НА HUSL

Как выровнять массив картинок строго слева или по центру?

Ответы (1 шт):