How can I vertical align text and image inside div

Question

This is what I'm trying to do:

Make the icon vertically centered inside div and the text vertically centered too!

I tried this:

<div id="mainDiv">
   <div id="top">
      <span><img src="path/img.png" class="myImage" /></span>
      <span>My Title</span>
   </div>
</div>

And css:

#mainDiv {
   width:100%;
   height:30px;
}

#top {
   width:50%;
   height:30px;
   display:table;
}

.myImage {
   vertical-align: middle;
   display: table-cell;
}

span {
   vertical-align: middle;
   display: table-cell;
}

But this is what I get:

Answer 1

It is already vertically centered. If you want text touch with the icon. you can do easily with display:flex.

like:

#top {
    align-items: center;
    background: blue none repeat scroll 0 0;
    display: flex;
    height: 30px;
    width: 50%;
}

.myImage {
   vertical-align: middle;
}

Working Fiddle

Answer 2

Add display:table-cell; to span

Add Following css

span {
   vertical-align: middle;
   display: table-cell;
   background:#ccc;
   border: 1px solid black;
   display: table-cell;
}

https://jsfiddle.net/hLs0mLp6/1/

Answer 3

   height:80px;
   line-height:80px;

try this snippet

#mainDiv {
   width:100%;

}

#top {
   width:50%;
   height:80px;
   background:yellow;
   line-height:80px;
}

<div id="mainDiv">
   <div id="top">
      <span><img src="path/img.png" class="myImage" /></span>
      <span>My Title</span>
   </div>
</div>

Answer 4

Try this,

#mainDiv {
width:100%;  
}

#top {
width:50%;
height:30px;
display:table;  
}

.myImage {
vertical-align: middle;
background-color:red;
}

span {
vertical-align: middle;
line-height:30px;  
}

Answer 5

#top {
   width: 50%;
   height: 40px;
   display: table; /* display: flex is a good option.*/
   float: left;
 } 

.myImage {
       vertical-align: middle;
   }