Skip to content

Instantly share code, notes, and snippets.

@jeysonm82

jeysonm82/vertical_align.html

Created November 8, 2016 14:55
Show Gist options
  • Save jeysonm82/1f9574e5c0abd21d184c1aadc69cd297 to your computer and use it in GitHub Desktop.
Save jeysonm82/1f9574e5c0abd21d184c1aadc69cd297 to your computer and use it in GitHub Desktop.
Download ZIP
4 Ways to vertical align list of elements in HTML
Raw
vertical_align.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="4 ways to vertical align list of elements.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
ul li {list-style-type: none; border: 1px solid red; margin: 10px;}
ul li:hover {color: red;}
/*T1 inline-block*/
ul.t1 li {display: inline-block; vertical-align: middle;}
/*T2 table-cell*/
ul.t2 li {display: table-cell; vertical-align: middle; }
/*T3 flex*/
ul.t3 {display: flex; align-items: center}
/*T4 translateY -50%*/
ul.t4 {position: relative;}
ul.t4 li {float: left; position: relative; top: 50%; transform: translateY(-50%);}
</style>
</head>
<body>
1. T1 inline-block
<ul class='t1'>
<li>Item 1</li>
<li>Item <br/>2</li>
<li>Item <br/><br/>3</li>
</ul>
2. T2 table-cell
<ul class='t2'>
<li>Item 1</li>
<li>Item <br/>2</li>
<li>Item <br/><br/>3</li>
</ul>
3. T3 flex
<ul class='t3'>
<li>Item 1</li>
<li>Item <br/>2</li>
<li>Item <br/><br/>3</li>
</ul>
4. T4 translateY -50%
<ul class='t4'>
<li>Item 1</li>
<li>Item <br/>2</li>
<li>Item <br/><br/>3</li>
</ul>
<!-- By jeysonmc https://github.com/jeysonmc -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment