Skip to content

Instantly share code, notes, and snippets.

@zoster
Created March 8, 2013 15:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zoster/5117072 to your computer and use it in GitHub Desktop.
Save zoster/5117072 to your computer and use it in GitHub Desktop.
Layout that centers rows with different numbers of block elements, using inline-block. Works in IE6+
<!DOCTYPE html>
<head>
<title></title>
<style>
div {
background:#ddd;
width:870px;
margin:auto;
text-align: center;
}
span {
display:inline-block;
border:1px red solid;
width:200px;
height:200px;
margin:5px;
}
/*first-child doesn't work in ie6*/
span:first-child{
width:400px;
}
</style>
</head>
<body>
<div>
<span>Use</span><br />
<span>spans</span>
<span>for</span>
<span>ie6</span>
<span>and</span>
<span>ie7</span>
<span>support</span>
<span>:)</span>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment