列/垂直中的中心文本,CSS网格

Center text in column/vertically, CSS Grid

来源: link 标签:cssflexboxcss-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项等...提前感谢任何帮助.

  最佳答案

您可以使用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 -->

  相同标签的其他问题

cssflexboxcss-grid
上一个问题:
下一个问题: