Skip to content

Instantly share code, notes, and snippets.

@thom4parisot

thom4parisot/gist:667608

Last active September 24, 2015 04:27
Show Gist options
  • Save thom4parisot/667608 to your computer and use it in GitHub Desktop.
Save thom4parisot/667608 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-line vertical alignment
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>CSS vertical-align sample</title>
<style type="text/css" media="all">
body{
font: 80%/1.5em Verdana, sans-serif;
}
.multicolumn li{
border: 1px solid #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 0 0 10px #aaa;
float: left;
list-style: none;
margin: 1.5em;
padding: .5em;
width: 230px;
}
.multicolumn span{
background-color: #ffc;
display: inline-block;
vertical-align: middle;
width: 150px;
/* IE */
*display: inline;
zoom: 1;
}
.multicolumn .vspace{
background: url('http://fillmurray.com/48/48') no-repeat center center;
height: 48px;
margin-right: 5px;
width: 48px;
}
</style>
</head>
<body>
<ul class="multicolumn" lang="en">
<li>
<span class="vspace"></span>
<span>Single line text</span>
</li>
<li>
<span class="vspace"></span>
<span>Multi-line text; with some uninteresting content. I CAN HAZ CHEESBURGER?</span>
</li>
<li>
<span class="vspace"></span>
<span>Single line of text</span>
</li>
<li>
<span class="vspace"></span>
<span>Another multi-line text, with less content</span>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment