While working on another theme for ClickFork, I came across this weird bug when trying to vertically align an image inside of a logo container.
The layout
I have a very simple html markup and want to vertically align an image inside a fluid width container. I am using Foundation CSS as the base stylesheet framework.
HTML
<code><div id="logo" class="large-3 columns">
<h1>
<a href="http://www.yoursite.com">
<img alt="Image" src="img/img_logo.png">
</a>
</h1>
</div>
CSS
#logo h1 {
display: table;
width: 100%;
height: 200px;
overflow: hidden;
}
#logo a {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
#logo a img {
display: block;
margin: 0 auto;
max-width: 100%;
}
The issue
Everything works great in all browsers apart from Firefox, where the image breaks out of the container at a smaller screen sizes. The image ignores the max-width property and doesn’t scale down as expected.
Not sure if it’s the combination of Foundation CSS and display: table, but the fix is pretty simple.
The solution
Adding table-layout: fixed to the containing element seems to fix this issue for Firefox. Now the logo image is vertically aligned in the middle of it’s containing element, and never grows out of it.
#logo h1 {
display: table;
table-layout: fixed;
width: 100%;
height: 200px;
overflow: hidden;
}
Hope it save you some time when you come across similar issue on your project.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
Thanks a lot, that solved my problem and save me a lot of time 🙂
Nice one, happy to help where I can.
wtf! How did you find that one? I fiddled for an hour until I found your post. Made my day!
I can’t remember Stefan, it’s been a long time ago, but I remember this being quite frustrating so I’ve posted about it hoping it will make someones day. The someone is you 🙂
You just saved me hours, I develop with Foundation & WordPress and you just saved our agencies home page. Thank you!!!
No probs Michale, glad it saved you some time.
Thanks for writing this article! I was using Graham Heath’s solution for centering content vertically (http://foundation.zurb.com/forum/posts/526-how-to-center-grid-row-vertically) but it was breaking in firefox. Adding table-layout fixed the problem.
You’re welcome Kirsty, glad to hear that it was useful.