时间戳

首页 > 解决方案 > 在列/垂直中居中文本，CSS Grid

css - 在列/垂直中居中文本，CSS Grid

问题描述

我有一个简单的网格（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项目等......在此先感谢您的帮助。

标签： cssflexboxcss-grid

解决方案

您可以使用flexbox执行此操作： https ://yoksel.github.io/flex-cheatsheet/

它易于学习，是当今网站中非常常见的工具。

  1. 用和制作.grid一个flex项目flex-basis: 100%;flex-flow: row nowrap;

  2. 制作.nav一个 flex 容器，并将其在中心的项目与align-items: center;

或者，如果你只想在你的nav元素上使用 flex 而别处，做

nav{
display: flex;
align-items: center;
}

完全足够了，如果您不希望整个布局具有灵活的方式

.grid {
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
margin: 0px 12%;
}

.nav{
display: flex;
align-items: center;
}

.grid>* {
  border: 1px solid lightgray;
  padding: 15px;
}
<div class="grid">
<div class="nav">
  <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>
</div>
  
  <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.
    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 -->

推荐阅读