Center text in column/vertically, CSS Grid

Question

I have a simple grid (https://jsfiddle.net/3f5oLjxu/1/), how can I get the links on the left side of the grid to center vertically, instead of being positioned at the top. 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 -->

I have tried all sorts of combinations of justify-content, justify-items, align-self, margin: auto;, turning the nav into a flex item, the ul into a flex item, etc... Thanks in advance for any help.

@Adrift if it can achieve the same layout absolutely. Should I be using flexbox in this scenario? — Justin, Jun 11 '19 at 18:01

DigitalJedi · Answer 1 · 2019-06-11T18:34:00.250

You could do this using flexbox: https://yoksel.github.io/flex-cheatsheet/

It is easy to learn and is very common tool in nowadays websites.

Make .grid a flex item with flex-basis: 100%; and flex-flow: row nowrap;
Make .nav a flex container, and align it's items in the center with align-items: center;

OR if you just want to use flex on your nav element and nowhere else, doing

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

would be totally sufficient, If you don't want your whole layout to have a flexy manner

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

score 1 · Answer 2 · answered Jun 11 '19 at 17:58

1

To change the position of a child of a grid, you can use the *-self property. Vertical will be your column access, use nav {align-self: center;} to vertically center the nav in this scenario.

answered Jun 11 '19 at 17:58

marsheth

822
6
9

`nav` is not a child of the grid, but a grandchild. – connexo Jun 11 '19 at 18:00
@marseth this centers the grid item, but now the height of the item is equal to the height of the content: https://jsfiddle.net/jL7e03v1/1/ (Not really sure how to describe it, but you can see it there) – Justin Jun 11 '19 at 18:04
@user3131132 Oh yes, if you're tracking it with the border, then the best way would be to just style the nav's children: [https://jsfiddle.net/q30np5k8/1/](https://jsfiddle.net/q30np5k8/1/). Soon this will be easier! [CSS-grid-layout-Subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid) – marsheth Jun 11 '19 at 18:10

score 1 · Answer 3 · answered Jun 11 '19 at 18:15

1

You can use the flexbox layout module. It seems like you were on the track there to begin with. Just attach this to the nav style.

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

answered Jun 11 '19 at 18:15

BlueLite

187
1
3
16

Center text in column/vertically, CSS Grid

3 Answers3