Bootstrap v4: текстовая карусель только по центру текста после скользящего завершения (в противном случае прикрепляется к верху)

Любая идея, почему эта карусель только для текста (Bootstrap v4) сохраняет текст моего элемента карусели прикрепленным к верху, а затем выравнивает его по центру вместо того, чтобы напрямую выравнивать текст элемента должным образом?

<div id = "myTextOnlyCarousel" class = "carousel slide mt-5" data-ride = "carousel">
  <ol class = "carousel-indicators">
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "0" class = "active"></li>
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "1"></li>
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "2"></li>
  </ol>
  <div class = "carousel-inner bg-dark text-light rounded text-center d-flex h-100 align-items-center justify-content-center" style = "min-height: 300px;">
    <div class = "carousel-item active">
      <h1>This is AWESOME!</h1>
    </div>
    <div class = "carousel-item">
      <h1>This is freaking AMAZING!</h1>
    </div>
    <div class = "carousel-item">
      <h1>YEAHHH</h1>
    </div>
  </div>
  <a class = "carousel-control-prev" href = "#myTextOnlyCarousel" role = "button" data-slide = "prev">
    <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Previous</span>
  </a>
  <a class = "carousel-control-next" href = "#myTextOnlyCarousel" role = "button" data-slide = "next">
    <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Next</span>
  </a>
</div>

что ты хочешь делать? по центру выровнять текст?

— 20.05.2018 07:03

@MontyGoldy центрирует его без привязки к верхнему моменту, пока карусель переходит к следующему элементу.

— 20.05.2018 07:04

javascript html css twitter-bootstrap

20.05.2018 06:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот мое решение JSFiddle

Я обернул ваш h1 классом wrapper.

Мне пришлось дать мин-высота, потому что без него предметы останутся наверху.

.wrapper {
  min-height:300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

и удалили некоторые классы гибкости, которые были применены к .carousel-inner div

Странно, что минимальную высоту приходится переопределять

— 20.05.2018 07:52

20.05.2018 07:48

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

Хорошо, это из-за активного класса в классе элементов карусели, что делает текстовый слайд в анимации. Так что измените его на блок отображения и добавьте удаление гибкости из карусели.

.carousel-item .text{
  display: flex;
  height: 100%!important;
  min-height: 300px;
  align-items: center;
  justify-content: center;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}

<div id = "myTextOnlyCarousel" class = "carousel slide mt-5" data-ride = "carousel">
  <ol class = "carousel-indicators">
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "0" class = "active"></li>
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "1"></li>
    <li data-target = "#myTextOnlyCarousel" data-slide-to = "2"></li>
  </ol>
  <div class = "carousel-inner bg-dark text-light rounded text-center  h-100  " style = "min-height: 300px;background: red;">
    <div class = "carousel-item active">
      <div class = "text">
        <h1>This is AWESOME!</h1>
      </div>
    </div>
    <div class = "carousel-item">
      <div class = "text">
        <h1>This is freaking AMAZING!</h1>
      </div>
    </div>
    <div class = "carousel-item">
      <div class = "text">
        <h1>YEAHHH</h1>
      </div>
    </div>

  </div>
  <a class = "carousel-control-prev" href = "#myTextOnlyCarousel" role = "button" data-slide = "prev">
    <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Previous</span>
  </a>
  <a class = "carousel-control-next" href = "#myTextOnlyCarousel" role = "button" data-slide = "next">
    <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Next</span>
  </a>
</div>

20.05.2018 07:52

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

Как вывести html-раздел наверх, нажав контейнер в нижнюю часть экрана

Могу ли я использовать селекторы для управления этим взломом флажка в div?

Загрузить текстуру из загрузки пользователя в геометрию в three.js

Вызов функции, находящейся в другом объекте

Фон CSS LazyLaoding (не теги HTML <img>)

Отображение фона при навигации

Как использовать несколько значков шрифтов в Google

Как отсортировать посты в Jekyll по алфавиту

Можно ли динамически заполнять вкладки материалов Angular 2 с помощью подписки For Loop?

Как вставить HTML с помощью foreach () без эха

Bootstrap v4: текстовая карусель только по центру текста после скользящего завершения (в противном случае прикрепляется к верху)

Ответы 2

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

Похожие вопросы