Menu icon Foundation

Developer | Athens, Attica (Greece)

My Posts

No Content

My Comments

Johnny Magrippis commented on Erik Krause's post almost 5 years

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>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Erik Krause's post almost 5 years

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>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content