Looking to center an icon within an "a" tag that spans the entire div container? The goal is to make the entire container clickable for carousel navigation, rather than just the icon itself.
Currently, I can achieve each desired effect separately. On the left, the entire container with the left chevron arrow is clickable. On the right, only the icon itself is clickable. I used absolute positioning for the left effect and text-align with Bootstrap's "my-auto" class for the right effect.
How can I combine both effects into one cohesive solution?
https://i.sstatic.net/12YPw.png 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 the CSS:
.sizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Bootstrap 4 solutions are appreciated.