Menu icon Foundation
Flex grid and vertical centering

I've been at this for hours, no luck doing a very (I thought) simple thing. I'm trying to have a page with a background image on the entire page (background-size: cover), and an H1 and contact form centered vertically and horizontally in the center, like so:

 

 

I've tried everything I can think of, with no luck. I've definitely included the foundation-flex-grid and foundation-flex-classes in app.scss, and commented out the standard grid and classes. I have set $global-flexbox to true in _settings.scss. 


I'm using the Zurb template with handlebars, if that makes a difference. Here's my very simple HTML, which is omitting the form, for simplicity's sake. I'm just trying to get this H1 to be vertically centered, and can't even do that:

 

<div class="main expanded">
<div class="row align-center">
  <div class="large-12 columns align-center self-align-middle">
  <h1>hello</h1>
</div>
</div>
</div><!--/main-->

 

I've tried putting align-middle on everything, from container divs, to the row, to main--and finally tried self-align-middle. Nothing seems to work. Any ideas?

 

Thanks!

flex-grid

I've been at this for hours, no luck doing a very (I thought) simple thing. I'm trying to have a page with a background image on the entire page (background-size: cover), and an H1 and contact form centered vertically and horizontally in the center, like so:

 

 

I've tried everything I can think of, with no luck. I've definitely included the foundation-flex-grid and foundation-flex-classes in app.scss, and commented out the standard grid and classes. I have set $global-flexbox to true in _settings.scss. 


I'm using the Zurb template with handlebars, if that makes a difference. Here's my very simple HTML, which is omitting the form, for simplicity's sake. I'm just trying to get this H1 to be vertically centered, and can't even do that:

 

<div class="main expanded">
<div class="row align-center">
  <div class="large-12 columns align-center self-align-middle">
  <h1>hello</h1>
</div>
</div>
</div><!--/main-->

 

I've tried putting align-middle on everything, from container divs, to the row, to main--and finally tried self-align-middle. Nothing seems to work. Any ideas?

 

Thanks!

Marius Crisan over 2 years ago

You can use this workaround:

 

<div class="row collapse">
    <div class="shrink column" style="height:100vh"></div>
    <div class="column align-self-middle text-center">
        I'm vertically centered
    </div>
</div>