CODEWITHSUNDEEP
htmlcss
tirenweb
tirenweb

Reputation: 31709

Center a span and image verticallly inside a div

How can I center vertically the span and the image here?

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


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

DEMO

When I remove the image the span is centered, but if I add the image the span is not centered any more..why?

Upvotes: 0

Views: 2343

Answers (3)

Jean-Georges
Jean-Georges

Reputation: 688

This seems to work

<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>

Upvotes: 3

Martin Konstantin Herrmann
Martin Konstantin Herrmann

Reputation: 29

http://cdpn.io/yvanH

adding a <br /> tag after span lets the img flow below the span

Upvotes: 0

Панайот Толев
Панайот Толев

Reputation: 6607

Wrap them in a div and then use the following:

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

And if you want fully centered you can add: left: 0, right: 0 .

Upvotes: 0

Related Questions