image and text not aligning in the middle?

Question

I am trying to image and text in middle.

  <div class="topHeader">
    <img src="Images/loginheader.jpg" />
    <span> Sample text</span>                        
  </div>

div.topHeader {
   height:70px;
   background-color:#868686;
   font-family: Segoe UI;
   font-size:40px;
   padding-left:30px;
}

JSFiddle

Answer 1

Apply

display:table; to your container and display:table-cell; vertical-align:middle; display:table-cell; vertical-align:middle; to the span.

check this: FIDDLE

Answer 2

Add img{float:left} and div.topHeader{line-height:70px} .

In fact, using line-height equal to the height of your div will center a one-lined text (and the image) vertically. Just don't forget to make your image to float in order to write text in the same line as the image. A Fiddle.