Блог

Я работаю с Carousel, в нем есть индикаторы и текст (оба с одинаковым количеством чисел), один индикатор для одного текста / слайда. Я хочу, чтобы индикатор был на том же месте, т.е. Он не должен перемещаться вверх или вниз в случае, если текст меньше или больше, я добился этого с помощью min-height . Теперь я хочу, чтобы этот текст был в центре, т. Е. с тем же количеством полей сверху и сверху, чтобы он выглядел хорошо, но я не могу этого сделать, я много пробовал, но я не мог добиться того, чего хочу. Я видел решения и пробовал их, но эти решения не работали для моего кода. Я надеюсь, что вы, люди, мне поможете.

HTML:-

 <div class="container">
    <div class="row">
        <div class="col-lg-7 col-md-8">
            <div class="award-winning-content">
                <h1>Meet an award-winning agency wholly-integrated for these times</h1>
                <h1>It's all about communicating with real humanity</h1>
                <h1>Person to person.<br/> H2H communication</h1>
                <h1>Clients engage us to simplify. Humanize.</h1>
                <h1>Make something good far better. And get it right, and remarkable, right away.</h1>
            
            <!-- Carousel Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"><span class="color-line"></span></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                  <li data-target="#myCarousel" data-slide-to="4"></li>
                </ol>
            <!-- Carousel Indicators End -->

                <a href="#" class="show-firs-crousel"><img src="images/refresh-icon.png" alt="" /> REPLAY</a>
            </div>
        </div>
    </div>
</div>
  

Попробуйте добавить оболочку для ваших <h1> тегов, например, с классом my-text-wrapper .

Этот класс должен быть flexbox. Затем вы можете выровнять текст с помощью align-items (по вертикали) и justify-content (по горизонтали).

 .my-text-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
  

Возможно, вам нужно добавить height: 100%; в класс, но поэтому мне нужно будет взглянуть на ваш css.

 <div class="my-text-wrapper">
    <h1>Meet an award-winning agency wholly-integrated for these times</h1>
</div>
<div class="my-text-wrapper">
    <h1>It's all about communicating with real humanity</h1>
</div>
<div class="my-text-wrapper">
    <h1>Person to person.<br/> H2H communication</h1>
</div>
<div class="my-text-wrapper">
    <h1>Clients engage us to simplify. Humanize.</h1>
</div>
<div class="my-text-wrapper">
    <h1>Make something good far better. And get it right, and remarkable, right
    away.</h1>
</div>