Vertical Centering in CSS

This is a discussion on "Vertical Centering in CSS" within the Web Page Design section. This forum, and the thread "Vertical Centering in CSS are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Closed Thread
 
LinkBack Thread Tools
  #1  
Old Dec 5th, 2003, 07:28
Reputable Member
Join Date: Aug 2003
Location: Singapore
Posts: 321
Thanks: 0
Thanked 0 Times in 0 Posts
Vertical Centering in CSS

Does anyone know how to do vertical centering? There doesn't seem to be much information in this field...

I tried the table method of centering stuff but it so happens that it doesn't work in my case... and I heard its the only method?

So here's what I did ( source code here ) :

<table border=0>
<tr>
<td>
<div class="container">
<div class="banner">
[img]bannergwx.png[/img]
</div>
</div>

</td>
</tr>
</table>

Sorry bout my alignment, but is it correct? My external CSS file (general.css) code is below....

.container {
background-image: url(background.jpg);
background-repeat: repeat-y;
height: 600px;
width: 955px;
border: 1px solid #FFFFFF;
margin-right: auto;
margin-left: auto;
}
.banner {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}


table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
}


Please be patient with my numerous CSS questions but I'm just starting out on this area... I have only just heard of it in webforumz!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!

  #2  
Old Dec 5th, 2003, 15:36
Most Reputable Member
Join Date: Jul 2003
Posts: 1,856
Thanks: 0
Thanked 0 Times in 0 Posts
Check this page out http://www.wpdfd.com/editorial/wpd0103.htm#toptip

The trick is to use a percentage (50%) for the "top" and then a negative "margin-top".
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Closed Thread

Tags
vertical, centering, css

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

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical centering - please help! mpnuttall Web Page Design 6 Apr 16th, 2008 11:38
CSS Vertical Menu. Can someone help? CoolNeb Web Page Design 3 Jul 16th, 2007 18:00
Div Vertical Align jwalker80 Web Page Design 5 Jan 30th, 2007 23:34
vertical centering woes gwx03 Web Page Design 6 Jun 5th, 2004 21:43
Tip : Vertical and Horizontal Centering - Solved! gwx03 Web Page Design 0 Dec 15th, 2003 06:11


All times are GMT. The time now is 02:20.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42