Question

我有一个简单的网格（https://foo.bar.com），如何使网格左侧的链接垂直居中，而不是位于顶部。 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项目，依此类推...等等。在此先感谢您的帮助。

Answer 1

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

它易于学习，并且是当今网站中非常普遍的工具。

将.grid和flex和flex-basis: 100%;制成的flex-flow: row nowrap;项目
使.nav为弹性容器，并将其位于中心的项目与align-items: center;

或者，如果您只想在nav元素上使用flex，而在其他地方则不使用

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

完全可以，如果您不希望整个布局具有 flexible 的方式

.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 -->

Answer 2

要更改网格子级的位置，可以使用* -self属性。垂直将是您的列访问权限，在这种情况下，请使用nav {align-self: center;}将导航栏垂直居中。

Answer 3

您可以使用flexbox布局模块。看来您是从那开始的。只需将其附加到nav样式即可。

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

在列/垂直居中文本，CSS网格

3 个答案: