0

So you see, I'm having a big problem here. I've already tried tons of solutions, but none have been useful to me. I'm making a custom tooltip, and I'm trying to get the text shown inside it gets vertically centered, but I haven't been able to.

    .tooltip {
    display:none;
    background:transparent url(slides/tooltip_img.png);
font-family:Helvetica;
    font-size:16px;
    height:157px;
    width:149px;
    color:#eee;
text-align:center;
line-height:20px;
    }

And this here is how I'm trying to make it center vertically:

    <div id="tooltip" style="height:62px;margin-left:46px;margin-top:102px;vertical-align:middle">
    <img src="supahsource.png" title="Tooltip info"/>

Anyway, I don't get the result I'm trying, can anybody help me out? Thanks a lot.

El Nitemare
  • 1
  • You might want to use the search function next time. http://stackoverflow.com/questions/11048541/vertical-text-center-in-div http://stackoverflow.com/questions/2943234/how-to-center-text-vertically-in-html-using-css-only – Jeff Noel Jul 08 '13 at 18:50

1 Answers1

0

vertical-align only works with Table elements. Try using position: absolute and if you really want to use vertical-align, use display: table-cell; on the block you wish to vertically align.

Th3BFG
  • 305
  • 1
  • 12
  • `vertical-align` applies to inline level and table-cell elements. – j08691 Jul 08 '13 at 21:17
  • You're right. I mispoke. `vertical-align` is good for inline elements. So you could vertically align the picture within a paragraph tag, but not the text within the paragraph tag. – Th3BFG Jul 08 '13 at 22:33