CODEWITHSUNDEEP
htmlcss
Ali Bhutta
Ali Bhutta

Reputation: 499

Text in Center Position Vertically

I'm working with Carousel, it has indicators and text(both in the same amount of numbers), one indicator for one text/slide. I want the indicator should be the same place i.e it shouldn't move up or down in case text is less or more I achieved this with help of min-height. Now I want that text should be center i.e same amount of margin from top and indicators so that it looks good, but I'm not able to do that I tried a lot but I couldn't achieve what I want. I saw solutions and tried them but those solutions didn't work for my code. I hope you people will help me.

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>

In case text is is less enter image description here

Upvotes: 1

Views: 49

Answers (1)

michaelT
michaelT

Reputation: 1701

Try to add a wrapper on your <h1> tags, for instance with the class my-text-wrapper.

This class should be a flexbox. You can then align your text using align-items (vertical) and justify-content (horizontal).

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

Maybe you have to add height: 100%; to the class, but therefore I would need to have a look at your 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>

Upvotes: 2

Related Questions