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

http://cdpn.io/yvanH

スパンの後にタグを追加する<br />と、イメージがスパンの下に流れます

于 2013-01-28T13:22:19.470 に答える
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 に答える