我有一个简单的网格( https://jsfiddle.net/3f5oLjxu/1/ ),如何让网格左侧的链接垂直中心,而不是定位在顶部. CSS:
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 0px 12%;
}
.grid>* {
border: 1px solid lightgray;
padding: 15px;
}
<div class="grid">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Interior Painting</a></li>
<li><a href="#">Exterior Painting</a></li>
<li><a href="#">Deck Painting</a></li>
<li><a href="#">Power Wash</a></li>
<li><a href="#">Wallpaper Remvoal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
</section>
</div>
<!-- close grid -->
我已经尝试了justify-content
,justify-items
,align-self
,margin: auto;
的各种组合,将nav
转换为flex
项,ul
转换为flex
项等...提前感谢任何帮助.