Reply
vertical align
Old 05-24-2007, 12:16 PM vertical align
Experienced Talker

Posts: 32
Name: Tim
Hi all,

Can some please help, I have only been doing css for a week now, no excuse as i should be able to work it out but how do i do a vertical align.

Basically i have

#maintextsleft {
WIDTH: 475px;
HEIGHT: 430px;
BACKGROUND: #FFFFFF;
FLOAT: left;
TEXT-ALIGN: center;}

and i want the image and test to be center horizontally and vertically.

If you can help i will be very grateful.

Cheers

Tank

Last edited by Tank_UK : 05-24-2007 at 12:19 PM.
Tank_UK is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 05-25-2007, 08:29 AM Re: vertical align
taketherisk's Avatar
Skilled Talker

Posts: 88
Name: Brett
Location: New Zealand
The CSS code would be:

vertical-align: middle;

vertical align: middle; will make the image go like shown below. The middle of the image will align with the text.

||||Top||||
||||mid|||| Text aligns to middle.
||bottom||
__________________
My Sites:
Free Domain Names
Free Web Hosting

Last edited by taketherisk : 05-25-2007 at 08:43 PM.
taketherisk is offline
Reply With Quote
View Public Profile
 
Old 05-25-2007, 11:44 AM Re: vertical align
LadynRed's Avatar
Super Moderator

Posts: 6,903
Location: Tennessee
And that will not work to do what the OP wants. Vertical-align: center does not work like the valign does in tables, and it is not meant to. Per the CSS specs:
Quote:
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.
Here are a couple of solutions to vertically center using CSS:
http://murphy.cz/victoria-s-vertical-centering/
http://www.badboy.ro/articles/2005-0...lign_with_css/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-25-2007, 01:10 PM Re: vertical align
Angelosanto's Avatar
Ultra Talker

Posts: 440
Name: Danny Angelosanto
A good one that I use for headers and things (i know this probably doesn't apply to this particular situation but it's useful to know) is to set the line-height attribute to the same size as the height of the div
Angelosanto is offline
Reply With Quote
View Public Profile Visit Angelosanto's homepage!
 
Old 05-25-2007, 02:04 PM Re: vertical align
jefkin's Avatar
Novice Talker

Posts: 14
Name: Jeff
Location: in front of my computer
Tim want's to vertically center an image and/or text.

One option is to create a containing div which has either padding or margin:

Code:
<div class="padding">
<div id="maintextleft">
blah blah lorum ipsum...
</div><!-- /#maintextleft -->
</div><!-- /.padding -->
where your css says something like:
Code:
div.padding { padding:5px; margin: 4px 0px;
                   }
you may need to play with the numbers to get the exact effect you want.

jefkin
jefkin is offline
Reply With Quote
View Public Profile
 
Old 05-29-2007, 04:38 AM Re: vertical align
Experienced Talker

Posts: 32
Name: Tim
Thanks all, been away over the weekend so i will have a play today,

Cheers :-)
Tank_UK is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to vertical align
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14662 seconds with 12 queries