Vertically center align icon inside floating element

Question

I have found so many answers about this problem here and tried them out on this with no luck.

How to set vertical alignment of all three icons to center/middle?

Here is the: Jsfiddle Demo

 .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 .icoMenu{background-position:-112px -16px} .BNav2:hover .icoDel{background-position:-368px -16px} .BNav2:hover .icoMove{background-position:-384px -48px} .BNav2:hover .icoPrev{background-position:-384px -16px} .BNav2:hover .icoNext{background-position:-400px -16px} .BNav2:hover .icoLink{background-position:-400px -48px} 

 <div class="CTitle" style="clear:both; overflow:hidden"> <a class="BNav2 fl" title="Home" href="../A.html"> <!-- float:Left --> <span class="ico icoHome fl vm"></span> <!--float:left, problem : how to align middle vertically--> Test </a> <a class="BNav2 fl" title="Previous" href="../B.html"> <!-- float:left --> <span class="ico icoPrev fl vm"></span> <!--float:left, problem : how to align middle vertically--> Previous </a> <a class="BNav2 fr" title="Next" href="../C.html"> <!-- float:right --> <span class="ico icoNext fl vm"></span> <!--float:left, problem : how to align middle vertically--> Next </a> </div> 

Answer 1

Looks like you use fixed height on both the container and the icon, so you can just to set some margin to it. The container's height is 24px and icon is 16px - (24-16)/2=4 .

.ico {
    margin-top: 4px;
}

https://jsfiddle.net/9p2fd0kL/7/

 .ico {margin-top:4px;} /*ADDED*/ .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 .icoMenu{background-position:-112px -16px} .BNav2:hover .icoDel{background-position:-368px -16px} .BNav2:hover .icoMove{background-position:-384px -48px} .BNav2:hover .icoPrev{background-position:-384px -16px} .BNav2:hover .icoNext{background-position:-400px -16px} .BNav2:hover .icoLink{background-position:-400px -48px} 

 <div class="CTitle" style="clear:both; overflow:hidden"> <a class="BNav2 fl" title="Home" href="../A.html"> <!-- float:Left --> <span class="ico icoHome fl vm"></span> <!--float:left, problem : how to align middle vertically--> Test </a> <a class="BNav2 fl" title="Previous" href="../B.html"> <!-- float:left --> <span class="ico icoPrev fl vm"></span> <!--float:left, problem : how to align middle vertically--> Previous </a> <a class="BNav2 fr" title="Next" href="../C.html"> <!-- float:right --> <span class="ico icoNext fl vm"></span> <!--float:left, problem : how to align middle vertically--> Next </a> </div> 

Answer 2

The simplest answer would be to use flexbox. It's designed for problems just like this one. Flexbox is nice because it will work to center your icons even if you change the height. No calculations necessary. It even works when you use a fluid height. Here's a nice cheat sheet by Chris Coyier at css-tricks with more of the options flexbox has. Just in case here's the support tables .

All you need to do is put display: flex and align-items: center in your css rule for .BNav2 . Flexbox does the rest!

 body { 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; display: flex; align-items: center; } .BNav2:hover .icoHome { background-position: -48px -176px } .BNav2:hover .icoPrev { background-position: -384px -16px } .BNav2:hover .icoNext { background-position: -400px -16px } 

 <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> 

Answer 3

Why not just use display: table on the body and put everything in a container:

Your Fiddle updated here

CSS

body {          /* <-- you could use a div instead of body if you want */
    position:absolute; 
    display: table;    
    height:100%; 
    width:100%;
    margin:0;
    ...
}

#container {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

HTML

<body>
    <div id="container">
         All your vertically aligned content here
    </div>
</body>