Menu icon Foundation
How to center grid row vertically?

I have one grid row of 400px in height. How do I center this row vertically?

vertical alignrow

I have one grid row of 400px in height. How do I center this row vertically?

This post has been closed. No new replies can be added.

Rafi Benkual almost 6 years ago

The problem is that HTML/CSS doesn't really handle vertical centering well. Foundation isn't going to help or hurt you in this respect.

You can try:
div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}

David Masterman almost 6 years ago

I'm also interested. I tried the above solution, but it didn't work for me. As a temp fix, I'm doing media queries and adjusting padding / image sizes. Not a great solution!

Brandon Arnold almost 6 years ago

As Rafi said there isn't really a great solution in the web at all, but CSS Tricks as usual has some great options. http://css-tricks.com/centering-in-the-unknown/

Asif almost 6 years ago

can you try the following jquery plugin? you might have to play a little with the height of the container.

https://github.com/PaulSpr/jQuery-Flex-Vertical-Center

Neil Sweeney over 5 years ago

One way I solved this issue was to create a new class called .vertical-align

.valign-middle {
    display: table;
}

.valign-middle .columns {
    display: table-cell;
    vertical-align: middle;
}

.valign-middle .columns,
.valign-middle [class*="column"] + [class*="column"]:last-child {
    float: none;
}

Basically you can apply this on the same container as .row and it should align all the columns to the middle. I haven't fully tested this yet but works so far!

Matt Pilott about 5 years ago

And here's SCSS if anyone needs

.valign-middle {
    display: table;

    > .columns {
        display: table-cell;
        vertical-align: middle;
    }

    > .columns, > [class*="column"] + [class*="column"]:last-child {
        float: none;
    }
}

Richie Sun about 5 years ago

@Matt, Thanks a bunch. This definitely worked perfectly.

Only issue I had was that If I'm trying to center text and view it in smaller browser aka mobile size, it breaks the mobile optimization.

Richie Sun about 5 years ago

Managed to make this work for small query.

@media #{$medium-up} {
  .valign-middle {
      display: table;

      > .columns {
          display: table-cell;
          vertical-align: middle;
      }

      > .columns, > [class*="column"] + [class*="column"]:last-child {
          float: none;
      }
  }  
}

Onur Gumus about 5 years ago

You can use CSS3 flex-box. AFAIK, this is the only way to make vertical alignment natively within the browser without resorting to tables.

Graham Heath almost 5 years ago

For my use, I needed to specify one vertically centered, one not. To use this, you have to add .valign-middle to both the row and the column.

.row{
  @media #{$medium-up}{
    &.valign-middle {
      display: table;
      > .columns.valign-middle {
        display: table-cell;
        vertical-align: middle;
      }
      > .columns:not(.valign-middle) {
        width:100%;
        display:block;
      }
      > .columns.valign-middle, > [class*="valign-middle"] + [class*="valign-middle"]:last-child {
        float: none;
      }
    }
  }
}

Joshua Troost almost 5 years ago

Why not just like this?

.valign-center {
    position: relative;
    top: 50%;
    > .columns {
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
    }
  }