Comments on: Aligning inline images with the vertical-align property

By: Jon

Jon — Fri, 12 Feb 2010 23:25:16 +0000

this is what i need:

I need to know how to wrap text above an object. The object needs to float down a set distance from the top and always be there no matter which Word-press article of varying paragraph lengths are loaded into this area.

The margin or padding that is currently pushing it down to where it needs to be is blocking the text from wrapping above it. Perhaps there is code that will wrap the text over padding but not margin or vica versa OR there is code that will tell the object to start on the 8th line down, etc…

Please help me out. Here is a link to an example page:
http://www.dancecrave.org/breakdance/highlights-world-dances/

By: Jon

Jon — Fri, 12 Feb 2010 23:22:17 +0000

can you use vertical-aling in php file? Cause it doesn’t seem to be responding.

By: Russ

Russ — Tue, 28 Oct 2008 10:43:41 +0000

@ federico: There are times I prefer to use “position: relative” too. However, when you want to position something in relationship to the content around it (such as aligning an images to the bottom of the text) then vertical align can sometimes be easier.

As always, there are no perfect answers – just lots of different solutions to the one problem

By: federico

federico — Tue, 28 Oct 2008 10:14:51 +0000

don’t waste your time, use position relative for this kinda things.

By: Russ

Russ — Mon, 20 Oct 2008 15:42:15 +0000

@Nickolas Loiko: Thanks for the feedback. It was written for beginners, so good to hear!

By: Nickolas Loiko

Nickolas Loiko — Sun, 19 Oct 2008 19:31:14 +0000

It’s very useful and interesting article. It is easy for understanding even for beginner.

By: Russ

Russ — Fri, 10 Oct 2008 19:54:25 +0000

@Pat: Good to hear from you. I have had the same concerns from students I have taught too

In the case where there is a single image and no other content inside a parent (like an paragraph or div), I prefer to set the image to “display: block” instead of “vertical-align: bottom”. This forces the image to operate like a block level item and the container then wraps around the image snuggly.

By: Pat

Pat — Fri, 10 Oct 2008 18:22:40 +0000

This is great. My students often have problems with inline images when used for something like a branding header with a background color, and no text. There would be a bottom gap because of the descender space. This space would grow as the text size was increased. Without any actual text in the div they can’t see what is causing the gap. Setting vertical-align: bottom eliminates the gap without requiring a height value on the div. Thanks for the great explanation.