Сосредоточить изображения по горизонтали - PullRequest
Новая
       1

Сосредоточить изображения по горизонтали

0 голосов
/ 12 октября 2018

Мне нужно отобразить 4 изображения по центру экрана.Мне нужно, чтобы эти изображения были сложены друг на друга.Я решил часть стека: 

.img-container { position: relative;  }

.img-container .top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

<div class="img-container">

    <img src="icon-1.png">
    <img class="top" src="icon-2.png">
    <img class="top" src="icon-3.png">
    <img class="top" src="icon-4.png">

</div>

<div >
    <img class="img-responsive center-block " src="another-image-below.png"
      style="display: block; margin: 0 auto;">
</div>

Это дает мне 4 стопки изображений, НО теперь мне нужно центрировать все 4 из них (по горизонтали).«Another-image-under.png» - это просто еще одно изображение, которое также центрировано, но оно должно быть размещено ниже четырех сложенных изображений.Звучит просто, и я попробовал все, но не могу решить.Как мне этого добиться?

Заранее спасибо.

РЕДАКТИРОВАТЬ: https://jsfiddle.net/b5p8dkcu/4/

1 Ответ

0 голосов
/ 12 октября 2018

Вам не нужен z-индекс в вашем примере, если только у вас нет другого элемента, который должен быть позади изображений.

Вы можете просто добавить align="center" к <div align="center" class="img-container">.

РЕДАКТИРОВАТЬ: 

<html>
<style>

.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {

}


<div align="center" class="img-container">

    <img src="icon-1.png">
    <img class="top" src="icon-2.png">
    <img class="top" src="icon-3.png">
    <img class="top" src="icon-4.png">

</div>

<div >
    <img class="img-responsive center-block " src="6.png"
      style="display: block; margin: 0 auto;">
</div>

Если вам нужно, чтобы они были вертикально друг на друга: 

<style>
.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {
 display: block;
}

Если вам нужно, чтобы они были буквально друг на друге: 

<style>
.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {
position: absolute;
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...