0

As the title says, I am trying to center an icon with an "a" tag which spans its div container. The idea is that I want the whole side/container to be clickable to navigate the carousel and not just the icon.

I am only able to get the two things that I want to happen separately. As you can see in the image, the whole container with the left chevron arrow is clickable and for the right chevron arrow, only the icon itself is clickable. I achieve the effect on the left using absolute position and the effect on the right using text-align with bootstrap's my-auto.

How can I achieve both effects at once?

enter image description here Here is the corresponding html

<div class="carousel slide mt-3" data-ride="carousel">
    <div class="row no-gutters">
        <div class="col-2">
            <a class="h1 text-danger debugborder2 sizer my-auto" href="#lusCarousel" style="text-align: center">
                <i class="fas fa-chevron-left"></i>
            </a>
        </div>
        <div class="mycard-carousel-inner col-8" role="listbox">
            ...
        </div>
        <div class="col-2 my-auto h1" style="text-align: center"><a class="h1 text-danger debugborder2" href="#lusCarousel"><i class="fas fa-chevron-right"></i></a></div>
    </div>
</div>

And css

.sizer {
    position: absolute; 
    top: 0;
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    text-align: center;
}

Bootstrap 4 solutions are welcome.

Luca Guarro
  • 1,085
  • 1
  • 11
  • 25

1 Answers1

1

Since you're using Bootstrap 4, you could add d-flex align-items-center justify-content-center classes to your <a>.

If you prefer plain CSS (which I recommend), select it using any valid selector and apply:

display: flex;
align-items: center;
justify-content: center;

... to it.

Also, instead of giving it h1 class (which, besides increasing font-size, also adds in some margins), you could simply give it the desired font-size (i.e: font-size: 5rem;)

tao
  • 82,996
  • 16
  • 114
  • 150