Vertical alignment does not work in safari and chrome

Question

<div class="commentator grid_3"> <img src="http://img.gawkerassets.com/img/183mxcnx46v2cjpg/avt-large.jpg" alt="commentator"> <span class="commentator-name"><a href="#">Joshua</a></span> </div> 

So, I set the commentator name vertical-align to Top.It works in firefox, but not in chrome and safari. Can someone help me? I do not want to use an absolute position when I have the perfect choice ...

Answer 1

add display: inline-block to span tag.lik this:

 .commentator-name{ display:inline-block; vertical-align: top; } 

view the demo.

Answer 2

Vertical image of a line using div in Chrome and Safari. Code:

 <div class="image-wrap"> <img src="xyz.png"/> </div> 

and

 .image-wrap { display:table-cell; width:400px; vertical-align:middle; }