如何在跨容器的<a>标记内水平和垂直居中放置图标

Question

正如标题所述，我正在尝试将一个图标与一个跨越其div容器的“ a”标签居中对齐。我的想法是，我希望整个侧面/容器都可以单击以浏览转盘，而不仅仅是图标。

我只能获得我想分别发生的两件事。如您在图像中所见，带有左V形箭头的整个容器是可单击的，而对于右V形箭头，只有图标本身是可单击的。我使用绝对位置在左侧获得了效果，并使用bootstrap's my-auto进行了文本对齐，在右侧获得了效果。

如何同时实现两种效果？

这是相应的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>  

和CSS

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

欢迎使用Bootstrap 4解决方案。

Answer 1

由于您正在使用Bootstrap 4，因此可以将d-flex align-items-center justify-content-center类添加到<a>中。

如果您喜欢纯CSS（我推荐），请使用任何有效的选择器将其选中并应用：

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

...对此。

此外，除了给它提供h1类（除了增加font-size之外，还增加了一些边距）外，您可以简单地给它提供所需的font-size（即：{{ 1}}）