图像和文字没有在中间对齐？

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;到您的容器。

检查一下：FIDDLE

Answer 2

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

事实上，使用等于div高度的line-height将垂直居中于单行文本（和图像）。只是不要忘记让图像浮动，以便在与图像相同的行中写入文本。 一个Fiddle.