Menu icon Foundation
y-center?

How is y-center supposed to work? I tried to vertically center an image in a grid column to no avail. I'm using foundation 5.2.1 scss

gridcss

How is y-center supposed to work? I tried to vertically center an image in a grid column to no avail. I'm using foundation 5.2.1 scss

Rafi Benkual over 5 years ago

Never heard of Y-center.

You can try a method called absolute center:

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

You need a declared height

img {
display: table;
height: auto;
}

http://cdpn.io/Ilrco

Erik Krause over 5 years ago

This centers horizontally but not vertically if I have a large image in one column and a smaller one in another...

y-center is part of xy-center.scss: https://github.com/zurb/foundation/blob/master/scss/foundation/components/_xy-center.scss

Rafi Benkual over 5 years ago

You really need Flexbox for this, but it's not supported by all browsers. This is a better solution:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Erik Krause over 5 years ago

This is exactly what y-center does (see provided link). However, it doesn't work for grid columns in any current browser I tested. That's why I ask how to use it correctly.

Wing-Hou Chan over 5 years ago

Hey Eric!

Although this is not your "y-center" I believe this will produce the same effect:

.yourClass {
  display: block;
  position: relative;
  top: 50%;
  margin-top: /* negative height of element divided by two */
}

Demo: http://codepen.io/winghouchan/pen/cexqs/ Hurrah!

Erik Krause over 5 years ago

This comes near but due to fixed column height spoils responsivity. Without fixed height the same happens as with translate technique: http://codepen.io/anon/pen/awDeJ

Wing-Hou Chan over 5 years ago

To be honest I think translate will work better. Should've thought of that.

I'm going to call it a day now and I'll dream up the solution.

Wing-Hou Chan over 5 years ago

Hey Erik!

I don't think there is a CSS-only solution. Check my Pen again: http://codepen.io/winghouchan/pen/cexqs

I was able to do it with a script.

Erik Krause over 5 years ago

Many thanks for that script solution. Perhaps I use this one. However, I'm still curious what the above mentioned foundation module is for. Well, we'll see. Will hopefully be documented some time...

Pinoy Website Creations over 5 years ago

i hope it help Erik used:

url(images.jpg/png) repeat-y center

Johnny Magrippis almost 5 years ago

It seems you've handled things with the previous replies, but since you've asked specifically about y-center, I figured I should post that it works great with Foundation's own data-equalizer, without further fiddling. I think it's a better solution overall too, as you don't need to declare the height yourself, data-equalizer does it for you, so you can use this method to show dynamic content of variable height.

<section class="row" data-equalizer>
    <div class="small-6 columns" data-equalizer-watch>
        <img src="//placehold.it/1280x720">
    </div>
    <div class="small-6 columns" data-equalizer-watch>
        <div class="y-center">
            <h2>This whole div is centered vertically!</h2>
            <p>Regardless of the length of the content here, this will be centered vertically relative to the image to the left. Unless it becomes taller I suppose.</p>
        </div>
    </div>
</section>