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

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

0 голосов
/ 03 апреля 2020

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

image of website

1 Ответ

0 голосов
/ 03 апреля 2020

Вы хотите иметь изображение в качестве фона, стилизуйте его, как вы хотите, с шириной и высотой. И затем вы хотите иметь контейнер для текста или содержимого, который будет position: absolute;, это приведет к тому, что ваш текст будет перекрывать изображение. Оттуда установите display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;, и это заставит ваш текст центрироваться на изображении.

Убедитесь, что он содержится в контейнере с position: relative, так что ваш элемент с абсолютным позиционированием переходит к границам контейнера, а не страницы. 

<div class="container">
  <img class="image-class"/>
  <div class="text-container">
    your text elements here
  </div>
</div>

.container {
  position: relative;
}

.image-class {
  width: 100%;
  height: auto;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Это должно приблизить вас к тому, что вы ищете. Я включил кодовую ручку с быстрым примером: https://codepen.io/sean-mooney/pen/ZEGNVrw

Надеюсь, это поможет!

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

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

https://codepen.io/sean-mooney/pen/jOPogrY

...