如何解决无法对齐侧边栏上的字体图标
尝试在其div中对齐图标时遇到了一些麻烦。无论是创建自定义CSS还是尝试使用bootstrap的text-align-center,我都无法尝试。
这是导航栏的简化示例:
<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; }
希望它能对您有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。