HTML's "<img align=top>" in CSS?

Question

How do I emulate

<img align='top' src='huge_image.jpg'>
<span>I start at the top right corner of the image!</span>

in CSS?

Maybe it's embarrassingly simple, but I really don't know.

Answer 1

edit:

I think you want the span to be inline with the image. So display:inline should do move the span to the right.

and

vertical-align:text-top should move the image to the top.

Answer 2

I think you're looking for the vertical-align CSS property.

<img style="vertical-align: top;" alt="blah" src="blah.jpg" />

Ideally you wouldn't just slap it directly on the <img> tag, but instead use a CSS class.

Answer 3

float: left will position it such that the img element will be to the left of the span, but if you are wanting to replicate align="top" because of the vertical alignment issue (span at bottom right vs. top right), then try style="vertical-align: top;"

Answer 4

<style="text/css">

.top_aligned_image {vertical-align: top; /* or text-top, I can't remember for sure which works better */}

</style>

<img class="top_aligned_image" src='huge_image.jpg' /><span>I start at the top right corner of the image!</span>

Should do it.

Answer 5

It depends on the container of your elements. The vertical-align CSS property doesn't exactly map to the valign attribute. I recommend checking this link out for an explanation on how to achieve this with CSS. http://phrogz.net/CSS/vertical-align/index.html