Question

在我的<ul>我当中有一些<li>。这些列表项需要垂直居中，背景必须是全宽和高。

我尝试的方式是在align-items: center;上使用<ul>，我在align-self: center;上尝试<li>

这是我现在的代码：

.desktop-menu-left {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    height: 100%;
    padding: 0;
    margin: 0;
}

.desktop-menu-left li {
    height: 100%;
}

.desktop-menu-left li a {
    height: 100%;
    padding: 0 10px;
}

<ul class="desktop-menu-left">
  <li class="darkblue"><a href="#">Opleidingen</a></li>
  <li class="orange"><a href="#">Leren bij *</a></li>
  <li class="green"><a href="#">Open huis</a></li>
  <li class="pink"><a href="#">Voor bedrijven</a></li>
  <li class="darkorange"><a href="#">Over *</a></li>
  <li class="lightblue"><a href="#">Niews</a></li>
</ul>

Answer 1

我用你的代码玩了一点。
那是你想要实现的那种结果吗？

/* Added here */
html,
body {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Added colors */
.darkblue {
  background-color: darkblue;
}

.orange {
  background-color: orange;
}

.green {
  background-color: green;
}

.pink {
  background-color: pink;
}

.darkorange {
  background-color: darkorange;
}

.lightblue {
  background-color: lightblue;
}

.desktop-menu-left {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  height: 100%;
  padding: 0;
  margin: 0;
}

.desktop-menu-left li {
  height: 100%;
  list-style-type: none; /* Added */
}

.desktop-menu-left li a {
  padding: 0 10px;
  /* Added */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<body>
  <ul class="desktop-menu-left">
    <li class="darkblue"><a href="#">Opleidingen</a></li>
    <li class="orange"><a href="#">Leren bij *</a></li>
    <li class="green"><a href="#">Open huis</a></li>
    <li class="pink"><a href="#">Voor bedrijven</a></li>
    <li class="darkorange"><a href="#">Over *</a></li>
    <li class="lightblue"><a href="#">Niews</a></li>
  </ul>
</body>

我经常使用这个中心方法作为一个类来轻松地重复使用它，如下所示：
.center-y { top: 50%; transform: translateY(-50%); }

希望它有所帮助。

Answer 2

我通过在li上设置Database Posts PostId userId Title来修复它，所以我没有必要为任何元素设置高度。

Answer 3

在这种情况下，最好使用 flexbox ，因为对于网格，如果要在HTML中添加<li>，则还必须更改CSS。

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.desktop-menu-left {
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu-left>li {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.desktop-menu-left>li:nth-child(odd) {
  background: #555;
}

.desktop-menu-left a {
  display: block;
  padding: 0 0.5rem;
}

<ul class="desktop-menu-left">
  <li><a href="#">Opleidingen</a></li>
  <li><a href="#">Leren bij *</a></li>
  <li><a href="#">Open huis</a></li>
  <li><a href="#">Voor bedrijven</a></li>
  <li><a href="#">Over *</a></li>
  <li><a href="#">Niews</a></li>
</ul>

Answer 4

您应该为desktop-menu-left height和width提供完整的宽度和背景背景，例如height: 100%;。

然后，您还可以根据the answer of this question垂直对齐列表项。

将孩子居中到其父母的中心

4 个答案: