Центр положения изображений Bootstrap Carousel

Я использую карусель Bootstrap 4 для своего веб-сайта. Все работает, но теперь я ищу решение для выравнивания изображения слайдера по центру карусели.

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

/* SLIDER
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 30rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}
<!-- Slider -->

          <div id = "Slider" class = "carousel slide" data-ride = "carousel">
            <ol class = "carousel-indicators">
              <li data-target = "#Slider" data-slide-to = "0" class = "active"></li>
              <li data-target = "#Slider" data-slide-to = "1"></li>
              <li data-target = "#Slider" data-slide-to = "2"></li>
            </ol>
            <div class = "carousel-inner">
              <div class = "carousel-item active">
                <img class = "first-slide" src = "img1.jpg" alt = "First slide">
                <div class = "container">
                  <div class = "carousel-caption text-left">
                    <h1>Platzhalter 1</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class = "btn btn-lg btn-outline-warning" href = "#" role = "button">Jetzt buchen</a></p>
                  </div>
                </div>
              </div>
              <div class = "carousel-item">
                <img class = "second-slide" src = "img2.jpg" alt = "Second slide">
                <div class = "container">
                  <div class = "carousel-caption">
                    <h1>Platzhalter 2</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class = "btn btn-lg btn-warning" href = "#" role = "button">Learn more</a></p>
                  </div>
                </div>
              </div>
              <div class = "carousel-item">
                <img class = "third-slide" src = "img3.jpg" alt = "Third slide">
                <div class = "container">
                  <div class = "carousel-caption text-right">
                    <h1>Platzhalter 3</h1>
                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class = "btn btn-lg btn-outline-warning" href = "#" role = "button">Browse gallery</a></p>
                  </div>
                </div>
              </div>
            </div>
            <a class = "carousel-control-prev" href = "#Slider" role = "button" data-slide = "prev">
              <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
              <span class = "sr-only">Zurück</span>
            </a>
            <a class = "carousel-control-next" href = "#Slider" role = "button" data-slide = "next">
              <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
              <span class = "sr-only">Vor</span>
            </a>
          </div>

Пример

что вы еще пытались центрировать изображение?

Vipul Sharma 22.10.2018 16:22

Опубликуйте рабочий сниппет с актуальными размерами изображений

Zim 22.10.2018 16:41
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
1 974
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте добавить эти правила css

.carousel-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}

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

Привет, Фабиан, твои правила css у меня сработали. Спасибо за быструю помощь :-)

Arsonil 22.10.2018 17:15

Другие вопросы по теме