Menu icon Foundation
Vertical center image in div - footer

Foundation5 center footer

Hi all

I am trying to create a footer where i can vertical center the image in my middle div.
Please see code and picture.

I have tried to solve the issue with making the div (seen in red) the same height as the parent so the image
would center itself with its vertical-align: middle; attribute set per default in foundation 5.
Thought i could not figure out how to this.

Anyone who perhaps can send me in the right direction?

Thanks on advance

<div class="siteFooter">
            <div id="copyright">
                <footer>
                    <div class="row">
                        <div class="small-12 medium-6 large-3 columns resetPaddingLeft">
                            <h2 class="underline">Headline type 2</h2>
                        	<p>and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        </div>
                        	
                        <div class="small-12 medium-6 large-3 columns" style="background-color: red;">
                        	<img src="http://scoutfitters.org/wp-content/uploads/2012/09/sunset.jpg" alt=""/>
                        </div>
                        
                        <div class="small-12 medium-12 large-6 columns resetPaddingRight">
							<ul>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 1</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 2</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 3</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 4</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 5</p></a>
                        		</li>
                        	</ul>
                        </div>
                    </div>
                    <div>
                        <div>
                            <a href="#"><p>Something 2015</p></a>
                        </div>
                    </div>
                </footer>
            </div>
            

         

centerverticalalignimagefooter

Foundation5 center footer

Hi all

I am trying to create a footer where i can vertical center the image in my middle div.
Please see code and picture.

I have tried to solve the issue with making the div (seen in red) the same height as the parent so the image
would center itself with its vertical-align: middle; attribute set per default in foundation 5.
Thought i could not figure out how to this.

Anyone who perhaps can send me in the right direction?

Thanks on advance

<div class="siteFooter">
            <div id="copyright">
                <footer>
                    <div class="row">
                        <div class="small-12 medium-6 large-3 columns resetPaddingLeft">
                            <h2 class="underline">Headline type 2</h2>
                        	<p>and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        </div>
                        	
                        <div class="small-12 medium-6 large-3 columns" style="background-color: red;">
                        	<img src="http://scoutfitters.org/wp-content/uploads/2012/09/sunset.jpg" alt=""/>
                        </div>
                        
                        <div class="small-12 medium-12 large-6 columns resetPaddingRight">
							<ul>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 1</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 2</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 3</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 4</p></a>
                        		</li>
                        		<li>
                        			<a class="displayInlineBlock" href="#"><p>link item 5</p></a>
                        		</li>
                        	</ul>
                        </div>
                    </div>
                    <div>
                        <div>
                            <a href="#"><p>Something 2015</p></a>
                        </div>
                    </div>
                </footer>
            </div>
            

         
Rafi Benkual over 3 years ago

The best way to center all this content is to create a wrapper for the content itself, and use padding on the box that contains it.

Or there is a trick with transforms - http://codepen.io/rafibomb/details/qOJKdd/