Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertical alignment of text

Status
Not open for further replies.
audiopro

audiopro

Programmer
Apr 1, 2004
3,165
GB
I have been Googling, how to vertically centre text within a div. I see conflicting comments about the use of vertical:align.
Could someone please point me to a tutorial about vertical alignment of text. W3 do not appear to mention it.
Thanks

Keith
 
Sort by date Sort by votes
You can't do it yet. You can achieve the result when using a table - but regular readers will know what I think about them [smile]

If your content is variable, then there is currently no way (without tables) to achieve uniform vertical alignment of your content. At least, that's what I have found.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Provided your text will only occupy one line, you can vertically center your content using the line-height property. It's useful for things like custom links and stuff. Here's an example:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

p.blah {
   height:100px;
   line-height:100px;
   text-align:center;
   border:1px solid red;
   margin-bottom:50px;
}

</style>
</head>
<body>

<p class="blah">As long as I stay on one line I will be vertically centered inside this paragraph.</p>
<p class="blah">As soon as I hit 2 lines<br />Oops!  No more vertical centering</p>

</p>

</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
I am creating the page dynamically and the amount of text can vary between a single line and 20 Lines. The text looks lost with a large gap underneath. I am padding it out with some images to make the height up and it looks ok but distracts from the image to the right of it which is appropriate to the text. I may play around with resizing the right hand image to match the number of chars. in the text.
I have only recently converted from tables to CSS so don't want to go down that route unless I really have to.

Keith
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
776
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
226
jjgupta915
jjgupta915
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
220
ChrisHirst
ChrisHirst
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
172
k4ghg
k4ghg
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
172
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top