Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Vertical centering of a graphic

Posted by: denmarks Jul 12 2011, 02:07 PM

Look at page http://www.dmmarks.com/hawaii2.html

There is a graphic saying "contents". I want it to automatically center itself at the left of the division with the actual contents. I created a division within the division and float:left. The problem is that I must specify an actual height. Using 100% causes part of the contents to appear below the graphic. Also I want it centered vertically and I do not know how to do it automatically. The contents can change size so I hate fixed heights. What can I do?

Posted by: pandy Jul 12 2011, 11:18 PM

Easiest by making it background image. Maybe it shouldn't be a background, but given the alt text you use, it doesn't matter really.

Remove the image and the DIV it's in altogether. Add the image as a background for #buttons, make it no-repeat and position it 50% down. Give #buttons some 50px left padding to make the text go free from the image and a little more to make it look nice.

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position