JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container">
<div class="CTitle" style="clear:both; overflow:hidden">
<a class="BNav2 fl" title="Home" href="../A.html">
<span class="ico icoHome fl vm"></span>
Test
</a>
<a class="BNav2 fl" title="Previous" href="../B.html">
<span class="ico icoPrev fl vm"></span>
Previous
</a>
<a class="BNav2 fr" title="Next" href="../C.html">
<span class="ico icoNext fl vm"></span>
Next
</a>
</div>
</div>
</body>
CSS
#container {
display: table-cell;
vertical-align: middle;
text-align:center;
}
body {
position:absolute;
height:100%;
width:100%;
display: table;
margin:0;
color:#666;
font:12px/20px'Open Sans', arial, Helvetica, sans-serif;
background: #CCD9C8;
-webkit-text-size-adjust:none;
}
body.page {
color: #bbb;
}
.fl {
float:left
}
.fr {
float:right
}
.vm {
vertical-align:middle
}
.ico {
display:inline-block;
width:16px;
height:16px;
line-height:16px;
background :url('http://files.fbstatic.com/PostImages/2664562/0/b0617e92-af51-4ca9-9b2f-3225c7607441.png') 0 0 no-repeat
}
.icoHome {
background-position:-48px -160px
}
.icoHome:hover {
background-position:-48px -176px
}
.icoPrev {
background-position:-384px 0px
}
.icoPrev:hover {
background-position:-384px -16px
}
.icoNext {
background-position:-400px 0px
}
.icoNext:hover {
background-position:-400px -16px
}
.CTitle {
border-bottom:1px #e5e5e5 dashed;
height:26px;
line-height:27px;
background-color:#FFFFDF;
padding:2px;
}
.BNav, .BNav2 {
line-height: 24px;
display: block;
border: 1px solid #ccc;
color: navy;
background-color: #CCFFFF;
width: 90px;
height: 24px;
text-align: center;
border-radius: 20px;
text-decoration: none;
}
.BNav:hover, .BNav2:hover {
color: green;
background-color: lime
}
.BNav2 {
padding-left:2px;
padding-right:2px;
width:80px
}
.BNav2:hover .icoHome {
background-position:-48px -176px
}
.BNav2:hover .icoPrev {
background-position:-384px -16px
}
.BNav2:hover .icoNext {
background-position:-400px -16px
}