0

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

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


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

演示

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

4

3 回答 3

3

这似乎有效

<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>
于 2013-01-28T13:24:33.293 回答
0

将它们包装在一个 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.

于 2013-01-28T13:20:08.690 回答
0

http://cdpn.io/yvanH

在 span 之后添加<br />标签让 img 在 span 下面流动

于 2013-01-28T13:22:19.470 回答