图像和文本在中间不对齐？

Question

我正在尝试在中间图像和文字。

  <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

应用

display:table; 到您的容器并display:table-cell; vertical-align:middle; display:table-cell; vertical-align:middle; 到跨度。

检查一下： FIDDLE

Answer 2

添加img{float:left}和div.topHeader{line-height:70px} 。

实际上，使用等于您的div高度的line-height将使line-height文本（和图像）垂直居中。 只是不要忘记使图像浮动以在与图像相同的行中写入文本。 小提琴。