hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : How To Center Text Vertically with CSS
Reply

Forum Jump

How To Center Text Vertically with CSS

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 09-21-2004, 05:40 PM
BigBison BigBison is offline
rogue element
 
Join Date: Jun 2004
Location: Northwest Colorado
Posts: 4,630
Cool

How To Center Vertically with CSS


Unfrozen Caveman Webmaster here with a tip!

When I designed with table-based layout, I designed many layouts with blocks of text vertically centered in a table cell. Piece of cake! Unfortunately, css doesn't seem to provide an easy alternative, although I'm very new to table-free css layout. I have come across two methods (hacks, whatever).

To vertically center a single line, set its line-height to the height of the element you are centering it in.

For blocks of content, today I stumbled across the following solution, which is so elegant and well-presented I thought I'd share it here:

www.wpdfd.com/editorial/thebox/deadcentre4.html

Reply With Quote


Sponsored Links
  #2  
Old 11-18-2004, 06:29 PM
jbielski jbielski is offline
New Member
 
Join Date: Nov 2004
Location: Detroit
Posts: 2
thats a good hack, thanks for sharing

Reply With Quote
  #3  
Old 01-23-2005, 06:19 AM
aarontwc aarontwc is offline
Disabled
 
Join Date: Jun 2003
Posts: 3
Thanks for sharing. But I don't really understand

Reply With Quote
Sponsored Links
  #4  
Old 01-23-2005, 09:09 AM
Website Rob Website Rob is offline
learning is in the doing
 
Join Date: Sep 2000
Location: Alberta, Canada
Posts: 3,109
The caring is in the sharing.  The learning is in the doing.  

__________________
PotentProducts.com - for all your Hosting needs
Helping people Host, Create and Maintain their Web Site
ServerAdmin Services also available

Reply With Quote
  #5  
Old 01-29-2005, 03:44 AM
VolkNet VolkNet is offline
Web Hosting Master
 
Join Date: Jun 2004
Location: Bay Area -USA
Posts: 1,738
Thanks! I've been looking for something like this!

__________________
<<< Please see Forum Guidelines for signature setup. >>>

Reply With Quote
  #6  
Old 02-01-2005, 09:03 PM
rogueslayer rogueslayer is offline
Newbie
 
Join Date: Feb 2005
Posts: 6
Thanks for sharing! I've always wondered how to do this

Reply With Quote
  #7  
Old 02-05-2005, 07:47 AM
peynir peynir is offline
Junior Guru Wannabe
 
Join Date: Dec 2004
Location: North Shore
Posts: 95
Nice tip. Thanks for sharing

__________________


Reply With Quote
  #8  
Old 02-07-2005, 03:46 AM
Rman2003 Rman2003 is offline
Web Hosting Master
 
Join Date: Dec 2003
Location: ./Southest Missouri
Posts: 601
I bet I've gone through 4 can's of Mt. Dew messing with that, trying to get it to work before coming across this article... now I'm too wired to sleep... might as well go do some more work! Thanks.

Reply With Quote
  #9  
Old 02-22-2005, 08:59 AM
cj-hosting cj-hosting is offline
Temporarily Suspended
 
Join Date: Jan 2005
Location: Derby, UK
Posts: 15
Cheers dude. I use this on my domain name registration 'please wait' page.

Reply With Quote
  #10  
Old 02-25-2005, 07:37 PM
LogoMaid.com LogoMaid.com is offline
Disabled
 
Join Date: Feb 2005
Posts: 17
Nice one

Jan

Reply With Quote
  #11  
Old 03-24-2005, 12:38 PM
openXS openXS is offline
Web Hosting Master
 
Join Date: Mar 2004
Posts: 992
Good hack. Thanks BigBison!

Reply With Quote
  #12  
Old 04-15-2005, 10:07 PM
dale4ever dale4ever is offline
New Member
 
Join Date: Apr 2005
Posts: 3
yeah thanks for sharing

Reply With Quote
  #13  
Old 12-05-2005, 05:55 PM
pdesigns pdesigns is offline
Newbie
 
Join Date: Dec 2005
Posts: 6
Wow nice hack, I've been looking for something like this for a loong time. thnx a bunch

Reply With Quote
  #14  
Old 12-24-2005, 12:20 AM
Liquid Smoke Liquid Smoke is offline
Disabled
 
Join Date: Dec 2005
Location: New York City
Posts: 4
pretty cool

i used to just have like a bottom or top margin until its centered

Reply With Quote
Reply

Related posts from TheWhir.com
Title Type Date Posted
Photos from ResellerClub Hosting Summit 2013 Blog 2013-10-22 04:01:51
CyrusOne to Build Second Data Center in San Antonio Web Hosting News 2013-08-08 14:40:08
Third Party Data Center Provider Budgets See Growth: Uptime Institute Survey Web Hosting News 2013-08-08 12:31:45
ProfitBricks Infographic: Web Hosting from 1995 to Today Blog 2013-06-28 13:52:35
Are you ready for Speed Networking at WHIR Events? Blog 2013-01-18 07:00:04


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

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 Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?