Как выровнять изображения по центру и наложить текст при наведении?

Question

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

Я новичок во flexbox, поэтому я не уверен, правильно ли я это делаю, я просто ищу общую конструктивную критику и руководство.

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 2em;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

img {
  min-height: 400px;
  max-height: 420px;
  display: flex;
  padding-right: 2em;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
  <img src="https://source.unsplash.com/collection/1163637/480x480">
</div>

Вот пример на Codepen .

Answer 1

Чтобы расположить по вертикали все в вашей оболочке с помощью flexbox, вам нужно добавить align-items: center; к .wrapper.

Оболочка также соответствует высоте ее содержимого в вашем примере, поэтому вы не увидите никакой разницы, если не зададите .wrapper высоту.

Вы установили body на height: 100%;, что делает ваш пример прокручиваться по вертикали в данный момент. Удаление этого удаляет полосу прокрутки, пока ваш вид достаточно велик, чтобы держать все его содержимое вертикально.

Скорректированный CSS:

html, body {
  width: 100%;
}

body {
  margin: 2em;
}

.wrapper {
  display: flex;
  align-items: center;
  height: 500px; /* Example height */
  flex-direction: row; /* It's this by default, so you could remove this if you want */
}
img {
  min-height: 400px;
  max-height: 420px;
  padding-right: 2em;
}

Я сделал скорректированный пример на CodePen, который работает для справки: https://codepen.io/happikitsune/pen/rZMOWO

Answer 2

Чтобы центрировать div на экране, вы можете изменить свойство top, как показано ниже:

.wrapper{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 20%;
}

А чтобы скрыть горизонтальную прокрутку, вы можете сделать это:

html, body{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

Чтобы наложить текст на изображение при наведении курсора:

  <div class="img_container_1">
   <img src="https://source.unsplash.com/collection/1163637/480x480">
   <div class="overlay">
     <div class="text">Hello World</div>
   </div>
 </div>

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: inherit;
    width: inherit;
    transition: .5s ease;
}

.image_container_1{
   position: relative;
}

.img_container_1:hover .overlay {
  opacity: 1;
}

img {
  min-height: 400px;
  max-height: 420px;
  display: flex;
  padding-right: 2em;
}

.text {
   color: white;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   text-align: center;
}

Вы можете найти полную демонстрацию здесь: https://codepen.io/anon/pen/LJRVwb?editors=1100