无法对齐侧边栏上的字体图标

问题描述

尝试在其div中对齐图标时遇到了一些麻烦。无论是创建自定义CSS还是尝试使用bootstrap的text-align-center，我都无法尝试。

这是导航栏的简化示例：

@H_502_4@

<div id="appSidenav" class="sidenav">
    <button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
    <button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
    <a href="#" class="pt-3">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-home"></i>
            </div>
            <div class="col">
                <span>Home</span>
            </div>
        </div>
    </a>
    <a href="#">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-users"></i>
            </div>
            <div class="col">
                <span>Contacts</span>
            </div>
        </div>
    </a>
</div>

我尝试将文字中心添加到cols，也尝试将text-align: center;添加到CSS，但似乎没有任何区别。我还尝试了不同大小的cols和cols，没有填充或边距。

我尝试为几乎所有标签或类添加对齐方式，但没有任何效果。

有什么想法吗？

谢谢！

更新

似乎没人很了解我在说什么，所以我要贴一张照片。

我尝试使用CSS和bootstrap类来对齐图标。我猜我可以接受，但是有点烦人。这是正在发生的事情：

解决方法

我不明白你的意思，

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 Icons</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<div id="appSidenav" class="sidenav">
    <button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
    <button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
    <a href="#" class="pt-3">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-home"></i>  <span>Home</span>
            </div>
        </div>
    </a>
    <a href="#">
        <div class="row">
            <div class="col-2">
                <i class="fas fa-users"></i> <span>Contacts</span>
            </div>
        </div>
    </a>
</div>
</body>
</html>

如果要居中对齐它们，可以：

在您要居中对齐的项的父项/包装器上尝试text-align: center
另一种方法是将display: flex添加到父项/包装器中，并将margin: auto添加到您要居中对齐的项目中。

我假设您想使链接居中对齐...如果是这样，我认为您应该在CSS的div类之后添加“ a” ...我会带回家的。

我认为CSS应该看起来像

.col a{ text-align:cenetr; }

希望它能对您有所帮助。

alignment bootstrap-4 font-awesome html