Menu icon Foundation
Vertical alignment of nested rows

Hi,
I started to use Foundation yesterday and and arranged some elements like on the attached image.
The name text and the smaller images are in two seperate, nested rows.
I would like theese two rows to be aligned at the bottom of the column (column is same height as big image through equalizer).

Auswahl 013

<div class="row" data-equalizer>
    <div class="medium-4 columns" data-equalizer-watch><img src="http://placehold.it/400x600"></div>
    <div class="medium-8 columns" data-equalizer-watch>
        <div class="row">
            <div class="small-12 columns">
                <h1>
                    My Real Name
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>

RowsnestedalignmentFoundation 5

Hi,
I started to use Foundation yesterday and and arranged some elements like on the attached image.
The name text and the smaller images are in two seperate, nested rows.
I would like theese two rows to be aligned at the bottom of the column (column is same height as big image through equalizer).

Auswahl 013

<div class="row" data-equalizer>
    <div class="medium-4 columns" data-equalizer-watch><img src="http://placehold.it/400x600"></div>
    <div class="medium-8 columns" data-equalizer-watch>
        <div class="row">
            <div class="small-12 columns">
                <h1>
                    My Real Name
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="small-3 columns">
                <img src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>
Shoaib Iqbal almost 5 years ago

Hi Claus, You should add a wrapper div to your nested row and add the following style, it will make it stick to bottom.

.stick-to-bottom{
  position:absolute;
  bottom:0;
}

see example here http://codepen.io/anon/pen/jEmEjM

Klaus almost 5 years ago

Thanks a lot!

Pushpendra Sanyasi about 3 years ago

@Shoaib:

 

what if i want to align it to the middle??

Shoaib Iqbal about 3 years ago

To make it vertically center, you can do it via translate property.

 

position:absolute;
top:50%;
transform: translateY(-50%);