views:

326

answers:

5

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.

+1  A: 

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.

Mark
+1  A: 

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.

Zack Mulgrew
+3  A: 

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

ddango
+1  A: 
<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.

David Thomas
Shouldn't that "top_aligned_image" rule have a "." in front?
Rafe Lavelle
...umm...yes. Yes, it should. Thanks for that =) (edited and amended)
David Thomas
+1  A: 

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

Rfvgyhn
Thanks everyone; accepting this answer because of the good link.
Pekka