hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : CSS vertical text align
Closed Thread

Forum Jump

CSS vertical text align

Closed Thread Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 07-03-2003, 03:25 PM
adorno adorno is offline
Disabled
 
Join Date: Nov 2002
Posts: 2,194

CSS vertical text align


This has probably discussed in this forum many times before, but I missed those discussions.

Question: using CSS, how do you align text vertically in a <p> or <div> or a <span> element. I'm looking to vertically align a set of text to the middle of an element. Left to right alignment is no problem; I just need vertical alignment.

A quick reply would be appreciated.

Thanks,

E.A.


Thread Summary
Thread Summary The OP (Original Poster or Thread Starter) aks one question:

Using CSS, how do you align text vertically in a <p> or <div> or a <span> element?

Although it took some time, an answer was provided in Post #11.
Quote:
Originally Posted by willdonovan View Post
... You need to make sure your text is wrapped in a <p></p> tags. This way you can use "vertical-align:middle;"

p{
vertical-align:middle;
}

OR

.your-class p{
vertical-align:middle;
}
The following post (Post #12) offers an alternative.
Quote:
Originally Posted by BXmanagement View Post
.element {
height:25px; (or whatever height you want)
line-height:25px; (match 'line-height' to 'height')
}

Contributors: SoftWareRevue

Share This Summary:

Sponsored Links
  #2  
Old 07-03-2003, 03:59 PM
null null is offline
Web Hosting Master
 
Join Date: Sep 2002
Location: Illinois
Posts: 2,305

__________________
How's my programming? Call 1-800-DEV-NULL

  #3  
Old 07-04-2003, 10:24 AM
adorno adorno is offline
Disabled
 
Join Date: Nov 2002
Posts: 2,194
Thanks for your reply.

However, I had already been to the w3schools site and what I saw there did not provide the answer I'm looking for. The vertical-align property only works for vertical alignment of text against an image. I want to vertically align text within an element without having to specify it from an image element.

I have a temporary solution where I create a table and use "valign" to align the text vertically, but I would like to have a CSS only solution.

CSS already has a horizontal align, "text-align:center", but I have not found a similar property for vertical alignment.

Thanks again,

E.A.

Sponsored Links
  #4  
Old 07-04-2003, 12:36 PM
Umbongo Umbongo is offline
Web Hosting Master
 
Join Date: Jan 2003
Posts: 674
Dont think there is one ive searched for this before.

  #5  
Old 07-04-2003, 01:12 PM
Rich2k Rich2k is offline
Web Hosting Master
 
Join Date: May 2002
Location: UK
Posts: 2,994
Did anyone actually visit that link above... it gives you the CSS vertical-align property!!!

  #6  
Old 07-04-2003, 11:04 PM
platinum platinum is offline
Aspiring Evangelist
 
Join Date: Jan 2002
Location: Adelaide, Australia
Posts: 405
You can do it - it's pretty messy though, the vertical-align propery doens't work very well (not as you would expect it to work anyway).

I will try and dig up the article I have seen on how to 'hack' a real vertical align.

  #7  
Old 07-05-2003, 10:12 AM
adorno adorno is offline
Disabled
 
Join Date: Nov 2002
Posts: 2,194
Thanks for trying guys.

Rich2K: I did visit the link, as I've done many times in the past. The vertical-align property is used with an image for vertically aligning text that appears next to it; it is not used independently on any element for vertical alignment of text. If I'm wrong, please correct me and show me how to use it without an image involved.

Platinum: like I indicated in my original post at top, I have a work-around using a table for centering with the "valign" property. I'm looking for a true 'vertical-align' property in CSS. I haven't found one yet.

In another occasion, I had to do my own calculations for vertically centering of text in an element. Basically, you need to know the dimensions of the containing element, the font size being used, and the length of the text string to be displayed in the container. But I'm looking for a ready-made solution in CSS.


Thanks again,

E.A.

  #8  
Old 04-18-2004, 12:10 PM
bitFreeze bitFreeze is offline
New Member
 
Join Date: Apr 2004
Location: Rio de Janeiro, Brazil
Posts: 1
Talking

I've found something that may work for thee...

www,hicksdesign,co,uk/articles/css/vertical_centering_with_css/

But change the commas into dots, because they do not allow to send urls on my first message. Well, I guess they've got their reasons...

If you're still alive since last reply...


cya

bitFreeze

  #9  
Old 04-18-2004, 04:51 PM
C~J~V C~J~V is offline
Junior Guru Wannabe
 
Join Date: Apr 2004
Location: A house on the beach
Posts: 54
Have you tried using absolute positioning?
Serious pain, and I've never done it, but I think it can be done using css only.

  #10  
Old 04-19-2004, 11:15 AM
adorno adorno is offline
Disabled
 
Join Date: Nov 2002
Posts: 2,194
Quote:
Originally posted by bitFreeze
I've found something that may work for thee...


www,hicksdesign,co,uk/articles/css/vertical_centering_with_css/

But change the commas into dots, because they do not allow to send urls on my first message. Well, I guess they've got their reasons...

If you're still alive since last reply...


cya

bitFreeze
WOW!

Going on a year since I posted the original question. I'd forgotten about it. But, the original question seeking a CSS solution for vertical centeting of text in an element was never answered. As I stated in my last post in this thread, I created my own solution using scripting for determining the positioning of text.

In the future I'll try to use the solution presented in your reply.

Meanwhile, although CSS can handle most of what HTML can do, I'll continue using a mix of HTML and CSS for my web pages. CSS by itself is not ready to take over.


thanks...

  #11  
Old 11-08-2007, 11:14 PM
willdonovan willdonovan is offline
New Member
 
Join Date: Nov 2007
Posts: 1
Possible answer using CSS

---"But, the original question seeking a CSS solution for vertical centeting of text in an element was never answered. As I stated in my last post in this thread, I created my own solution using scripting for determining the positioning of text."---

Hi There,

it has probably been even longer that a year now since this thread started. I found a CSS solution

you need to make sure your text is wrapped in a <p></p> tags.
This way you can use "vertical-align:middle;"

p{
vertical-align:middle;
}

OR

.your-class p{
vertical-align:middle;
}



I discovered the same problem and did a Google search for "css, w3c schools, vertical text align"

I think it has something to do with the DOM and the referencing of the text that it is meant to style. This solution above is for the spot where you want to just vertical align a particular text area.

Hope this helps someone passing through.

  #12  
Old 11-09-2007, 03:30 AM
BXmanagement BXmanagement is offline
Junior Guru Wannabe
 
Join Date: Oct 2007
Posts: 51
IE 7 doesn't align text vertically when using verticle-align. Make your line-height the same height as the element.

Try this in your css,

.element {
height:25px; (or whatever height you want)
line-height:25px; (match 'line-height' to 'height')
}

It should automatically align your text in the middle. That should work.

__________________
Jeff S.

Closed Thread

Related posts from TheWhir.com
Title Type Date Posted
Photos from ResellerClub Hosting Summit 2013 Blog 2013-10-22 04:01:51
Government Shutdown Slams Supercomputing Stocks Web Hosting News 2013-10-15 10:39:54
New Report Suggests Microsoft in Cahoots with NSA Blog 2013-07-12 11:32:22
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?