homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How To Vertically Align Content
My Simple Method
csuguy

5+ Year Member



 
Msg#: 3736164 posted 9:29 pm on Sep 1, 2008 (gmt 0)

I've found that vertical-alignment is a popular topic in this forum (and probably other web design forums as well). As such I wanted to post my simple solution for myself and others to reference.

Before I provide the code, here is the explanation: Many of us have tried to use vertical-align on divs, with no success. The reason being that vertical-align aligns content according to line-height... OR image height! By using a 100% height image - you can vertically align inline content (NOT BLOCK CONTENT!).

But you don't always want to put an image in wherever you want to vertically align content. Fortunately, you can set the images visibility to hidden and it will still work!

Here is the CSS:


.valigner
{
height:100%;
vertical-align:middle; /*or other accepted alignment*/
visibility:hidden;
width:0px;
}

Remember this must be applied to images only! For example:

<div id="content">
<img class="valigner"> <!-- You don't need to specify src -->
Content...
</div>

Tell me what you think!

Ryan

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved