Raise your hand if you’ve tried to get a grid of client logos to center horizontally and vertically inside each logo’s container. It sounds so simple and yet frustratingly it’s not. Sure there are some new CSS properties that can help, but they’re not supported in older versions of Internet Explorer.

Thankfully I stumbled on a solution a few years ago and it still works great today in all major browsers. We’re going to start with the following html:

<article class="clients">
	<span></span><img src="images/img-logo1.png" alt="logo" />
</article>

<article class="clients">
	<span></span><img src="images/img-logo2.png" alt="logo" />
</article>

<article class="clients">
	<span></span><img src="images/img-logo3.png" alt="logo" />
</article>

Yeah I know it’s an empty span. Deal with it. It makes the magic happen for lame browsers. Then jump in with your CSS. You can adjust the width/height, margin and border styling to your heart’s content.

        article.clients {
	float: left;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 203px;
	height: 150px;
	margin-right: 15px;
	margin-bottom: 15px;
	border: 1px solid #4d4d4d;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	             border-radius: 3px;
}

article.clients * {
	vertical-align: middle;
}

article.clients span {
	display: inline-block;
	height: 100%;
	width: 1px;
}

That’s it! You’re all centered up, baby. And if you’re having trouble with the last logo in each row dropping down because of that extra margin on the right just add a class of last to it and target it with some CSS.

<article class="clients last">
	<span></span><img src="images/img-logo1.png" alt="logo" />
</article>

article.clients.last {
	margin-right: 0px;
}

About: Jonathan Longnecker

Jonathan Longnecker is the co-founder of FortySeven Media– a kick awesome design firm specializing in web design, branding, ExpressionEngine and media creation in Knoxville, TN. He’s also part of the Kick Awesome Show – the show dedicated to design, the web and general nerdery. Find him on twitter (@necker47), and on the web at fortysevenmedia.com.