Question

如何在此处垂直居中显示跨度和图像？

<div id="foo">
  <span>Im great</span>
  <image src="">
</div>


div {
  height:350px; 
  background:yellow;
}
div span{
  line-height: 350px;
  background: red;
}

DEMO

当我移除图像时，跨度居中，但如果我添加图像，则跨度不再居中..为什么？

Answer 1

这似乎有效

<div id="foo">
<span style="vertical-align:middle;">Im great</span>
<image style="vertical-align:middle;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROD-0j3FBYzU2dxJMpps3ZWiYl0dKoEdt1EE4c5zVHtPfhyw_59q4WEX2S">
</div>

Answer 2

将它们包裹在div中，然后使用以下内容：

HTML：

<div id="foo">
    <div class="wrapper">
      <span>Im great</span>
      <image src="">
    </div>
</div>

CSS：

#foo{
  position: relative;
}
.wrapper{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

如果您想要完全居中，可以添加：left: 0，right: 0。

Answer 3

http://cdpn.io/yvanH

在span之后添加<br />标记，让img在span

下方流动

将一个跨度和图像居中放在div中

3 个答案: