如何在div中垂直对齐文本和图像

Question

这就是我要做的事情：

使图标在div内垂直居中，文本也垂直居中！

我试过了：

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

和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;
}

但这就是我得到的：

Answer 1

它已经垂直居中。如果您想要文字触摸图标。您可以使用inline-block轻松完成。

像：

display:flex

<强> Working Fiddle

Answer 2

添加显示：table-cell;跨越

添加以下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;

试试这个代码段

#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

试试这个，

#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;
   }