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?

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

I've had the most luck using the top answer here: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Chizzle, Jul 14 '15 at 18:40
Also this can be done with `flex`, [see a demo](https://jsfiddle.net/lmgonzalves/9p2fd0kL/6/). — lmgonzalves, Jul 14 '15 at 18:43
Thank you very much. {flex} is the best possible answer so far. — Theo, Jul 14 '15 at 19:11

David Mann · Accepted Answer · 2015-07-14T19:07:43.803

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>

Stickers · Answer 2 · 2015-07-15T15:12:00.433

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>

score 0 · Answer 3 · answered Jul 15 '15 at 15:51

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>

Vertically center align icon inside floating element

3 Answers3