在我的 <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>最佳答案
我试了一下你的代码。
这是你想要达到的结果吗？
/* 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%;变换:翻译Y(-50%)； }
希望对您有所帮助。
关于html - 将 child 置于其 parent 的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50118636/