Vertically-Aligned

by chadarsenault

HTML

<!--
    Fiddle for buttons of:
        - equal height
        - equal or unequal width
        - vertically & horizontally-centered text
        - 100% height & width anchors
-->
<div id="container">
    <div class="links one">
        <a href="#">One</a>
    </div>
    <div class="links two">
        <a href="#">Two Two</a>
    </div>
    <div class="links three">
        <a href="#">Three Three Three</a>
    </div>
    <div class="links four">
        <a href="#">Four Four Four Four</a>
    </div>
    <div class="links five">
        <a href="#">Five Five Five Five Five</a>
    </div>
</div>

CSS

* { 
    /*ie box model forever!*/
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.links {
    height: 5.0em;
    text-align:center;
    outline: 1px solid #333;
    float:left;
    background: #69f;
    margin: 0 1.0em;
    overflow:hidden;
}

.links.one { width: 8em; }
.links.two { width: 4em; }
.links.three { width: 4em; }
.links.four { width: 5em; }
.links.five { width: 6em; }

.links a {
    width:10em;
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    height: inherit;
    color: #000;
}
.links a:hover {
    background: #9f6;
}