Skip to content

Instantly share code, notes, and snippets.

@avaccari

avaccari/CSSAlign.css

Created October 20, 2015 03:18
Show Gist options
  • Save avaccari/f42707058d689247f46a to your computer and use it in GitHub Desktop.
Save avaccari/f42707058d689247f46a to your computer and use it in GitHub Desktop.
Download ZIP
Aligned row of buttons with centered multiline text using CSS
Raw
CSSAlign.css
#buttons {
display: inline-block;
text-decoration: none;
height: 100px;
width: 90%;
text-align: justify;
padding-left: 5%;
padding-right: 5%;
}
#buttons:after {
content: ' ';
display: inline-block;
width: 100%;
height: 100px;
}
.button {
display: inline-block;
height: 100%;
width: 20%;
text-align: center;
vertical-align: middle;
border: solid #0066cc 1px;
text-decoration: none;
}
.button:hover {
color: #ffffff;
border: solid #0066cc 1px;
background: #4c94db;
}
.button:visited {
color: #0066cc;
border: solid #0066cc 1px;
}
.linktext {
vertical-align: middle;
display: inline-block;
}
.centerit {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Raw
CSSAlign.html
<html>
<head></head>
<body>
<div id="buttons">
<a href="/" class="button">
<span class="centerit"></span>
<span class="linktext">Link</span>
</a>
<a href="/" class="button">
<span class="centerit"></span>
<span class="linktext">Link<br />MoreDetails</span>
</a>
<a href="/" class="button">
<span class="centerit"></span>
<span class="linktext">Link<br />WAY<br/>MoreDetails</span>
</a>
<a href="/" class="button">
<span class="centerit"></span>
<span class="linktext">Link</span>
</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment