css 如何将菜单居中对齐以使其看起来统一?

yyyllmsg  于 2023-02-17  发布在  其他
关注(0)|答案(2)|浏览(119)

我有一个问题,我的设计。我试图对齐菜单中心,但我需要它是统一的。我需要它是不知何故,因为它是在下面的图片。

我不明白为什么我把.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>
tkqqtvp1

tkqqtvp11#

您可以尝试将菜单项设置为显示为inline-block,然后居中对齐父容器。
将以下内容添加到CSS代码:

.menu p {
  display: inline-block;
  margin: 20px 0;
}

还要更改.left-menu类的text-align属性:

.left-menu {
  width: 15%;
  float: left;
  background-color: lightgrey;
  height: 100%;
  text-align: center;
  color: #3f3f3f;
  display: flex;
  align-items: center;
  justify-content: center;
}

这将使菜单项垂直和水平居中对齐。

m2xkgtsf

m2xkgtsf2#

我可能会这么做。
1.去掉花车,它们不是现代的布局技术。
1.在Bootstrap的类中使用flexbox(和一些自定义CSS)
1.摆脱你的硬宽度。让内容来决定。
1.也可以使用flexbox来分隔菜单项。
1.菜单项不要使用段落,这不是它们的目的。
1.为菜单使用语义元素和ARIA标签以获得更好的可访问性。请参见https://www.w3.org/WAI/tutorials/menus。如果你遵循Bootstrap的指南,你会看到很多类似的东西。
另外,请查看Bootstrap docs以利用它提供的所有功能。您正在使用Bootstrap已经提供的一些CSS复制代码。

.left-menu {
  background-color: lightgrey;
  text-align: center;
  color: #3f3f3f;
}

.right-content {
  background-color: white;
  height: 100%;
}

.menu {
  height: 100%;
  text-align: left;
}

.menu>div {
  white-space: nowrap;
  justify-content: space-around;
}

.menu>div>i {
  margin-right: 1rem;
}
<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="d-flex">
  <div class="left-menu">
    <div class="menu d-flex flex-column px-3">
      <div><i class="fa-brands fa-slack"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span></div>
      <div><i class="fa-brands fa-twitter"></i><span class="ms-1 d-none d-sm-inline">Twitter</span></div>
      <div><i class="fa-brands fa-linkedin-in"></i><span class="ms-1 d-none d-sm-inline">LinkedIn</span></div>
      <div><i class="fa-brands fa-youtube"></i><span class="ms-1 d-none d-sm-inline">YouTube</span></div>
      <div><i class="fa-solid fa-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span></div>
      <div><i class="fa-solid fa-right-from-bracket"></i><span class="ms-1 d-none d-sm-inline">Logout</span></div>
    </div>
  </div>

  <div class="right-content px-3">
    Right Content
  </div>
</div>

相关问题