我有一个问题,我的设计。我试图对齐菜单中心,但我需要它是统一的。我需要它是不知何故,因为它是在下面的图片。
我不明白为什么我把.menu
设置为text-align:center
时代码会不规则地对齐。如果我使用align left,它会把它们送回左边界。父left-menu
应该居中对齐,menu
应该左居中对齐。
.left-menu {
width: 15%;
float: left;
background-color: lightgrey;
height: 100%;
text-align: center;
color: #3f3f3f;
}
.right-content {
width: 85%;
float: right;
background-color: white;
height: 100%;
}
.menu {
height: 100%;
text-align: left;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="left-menu">
<div class="menu">
<p><i class="fa-brands fa-slack"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span></p>
<p><i class="fa-brands fa-twitter"></i><span class="ms-1 d-none d-sm-inline">Twitter</span></p>
<p><i class="fa-brands fa-linkedin-in"></i><span class="ms-1 d-none d-sm-inline">LinkedIn</span></p>
<p><i class="fa-brands fa-youtube"></i><span class="ms-1 d-none d-sm-inline">YouTube</span></p>
<p><i class="fa-solid fa-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span></p>
<p><i class="fa-solid fa-right-from-bracket"></i><span class="ms-1 d-none d-sm-inline">Logout</span></p>
</div>
</div>
<div class="right-content">
</div>
2条答案
按热度按时间tkqqtvp11#
您可以尝试将菜单项设置为显示为
inline-block
,然后居中对齐父容器。将以下内容添加到CSS代码:
还要更改
.left-menu
类的text-align
属性:这将使菜单项垂直和水平居中对齐。
m2xkgtsf2#
我可能会这么做。
1.去掉花车,它们不是现代的布局技术。
1.在Bootstrap的类中使用flexbox(和一些自定义CSS)
1.摆脱你的硬宽度。让内容来决定。
1.也可以使用flexbox来分隔菜单项。
1.菜单项不要使用段落,这不是它们的目的。
1.为菜单使用语义元素和ARIA标签以获得更好的可访问性。请参见https://www.w3.org/WAI/tutorials/menus。如果你遵循Bootstrap的指南,你会看到很多类似的东西。
另外,请查看Bootstrap docs以利用它提供的所有功能。您正在使用Bootstrap已经提供的一些CSS复制代码。