Text vertically centered with CSS

F

Fokke Nauta

Hi all,

I created a table with a lot of cells. In every cell there is a word of
text. It was easy to get the text aligned horizontally with the use of
embedded CSS:

td {
text-align:center;
}

I have not been able to get the text vertically aligned in the cells.
For instance, this won't work:

td {
text-align:center;
vertical-align:middle;
}

This won't work either:

table {
vertical-align:middle;
}

What is the trick to get the text in the cells aligned vertically?

Many thanks in advance for your help.

With best regards,
Fokke Nauta
 
J

Jonathan N. Little

Fokke said:
Hi all,

I created a table with a lot of cells. In every cell there is a word of
text. It was easy to get the text aligned horizontally with the use of
embedded CSS:

td {
text-align:center;
}

I have not been able to get the text vertically aligned in the cells.
For instance, this won't work:

td {
text-align:center;
vertical-align:middle;
}

This won't work either:

table {
vertical-align:middle;
}

What is the trick to get the text in the cells aligned vertically?

Many thanks in advance for your help.
Click to expand...


URL???


Works here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>

<style type="text/css">
td {
text-align:center;
vertical-align:middle;
border: 1px solid red;
}

</style>

</head>
<body>

<table>
<tr><td>foo<br>bar</td><td>bar</td><td>bin</td><td>baz</td></tr>
<tr><td>foo</td><td>bar</td><td>bin</td><td>baz</td></tr>
<tr><td>foo</td><td>bar</td><td>bin</td><td>baz</td></tr>
<tr><td>foo</td><td>bar</td><td>bin</td><td>baz</td></tr>
<tr><td>foo</td><td>bar</td><td>bin</td><td>baz</td></tr>
<tr><td>foo</td><td>bar</td><td>bin</td><td>baz</td></tr>
</table>
</body>
</html>
 
F

Fokke Nauta

Jonathan N. Little said:
URL???
Click to expand...

It's on a local workstation. It has its own http server.
Works here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>

<style type="text/css">
td {
text-align:center;
vertical-align:middle;
border: 1px solid red;
}

</style>
Click to expand...

Jonathan
Click to expand...

Thanks Jonathan.
Your html works fine, here.
The problem was, that I removed the doctype. I did that to be able to give
the scrollbar a colour. With a doctype that did not work.
But without the doctype the vertical align did not work. I copied the
doctype from your code into mine and now it works.
So, I'll keep it this way.
Thanks very much.

Best regards,
Fokke
 
J

Jukka K. Korpela

The problem was, that I removed the doctype. I did that to be able to give
the scrollbar a colour. With a doctype that did not work.
Click to expand...

Apparently you used a browser that supports the proprietary CSS features
for scrollbars in Quirks Mode only. That wouldn't really surprise me,
but in my tests, I was unable to produce such an effect. IE seems to
recognize scrollbar-base-color in all modes, and other browsers seem to
ignore it in all modes.

So can you post the URL of a demo page that illustrates the phenomenon?
But without the doctype the vertical align did not work. I copied the
doctype from your code into mine and now it works.
Click to expand...

That sounds odd. I don't remember having seen any variation in support
to vertical-align: middle depending on mode. Care to post a URL?
 
B

Beauregard T. Shagnasty

Fokke said:
The problem was, that I removed the doctype. I did that to be able to
give the scrollbar a colour.
Click to expand...

I prefer the colours provided by my own browser, thank you very much.
They are not part of your web page.
 
F

Fokke Nauta

Jukka K. Korpela said:
Apparently you used a browser that supports the proprietary CSS features
for scrollbars in Quirks Mode only. That wouldn't really surprise me, but
in my tests, I was unable to produce such an effect. IE seems to recognize
scrollbar-base-color in all modes, and other browsers seem to ignore it in
all modes.
Click to expand...

Yes, it is IE only.
So can you post the URL of a demo page that illustrates the phenomenon?
Click to expand...

I copied the page to my server. Here is is: www.pc3.nl/test/local.htm
That sounds odd. I don't remember having seen any variation in support to
vertical-align: middle depending on mode. Care to post a URL?
Click to expand...

It is thru, though.I was surprised as well.
 
F

Fokke Nauta

Beauregard T. Shagnasty said:
I prefer the colours provided by my own browser, thank you very much.
They are not part of your web page.
Click to expand...

Sometime it's nice.

Fokke
 
J

Jukka K. Korpela

I copied the page to my server. Here is is: www.pc3.nl/test/local.htm
Click to expand...

Thank you. The W3C Markup Validator reports 65 errors. Some of them may
have an impact, e.g. lack of closing tags for heading elements.

There are no scrollbar-related declarations in the CSS code, so the page
does not demonstrate how the scrollbar effects would depend on a doctype.
It is thru, though.I was surprised as well.
Click to expand...

I fail to see how your page demonstrates the variation.
 
F

Fokke Nauta

Jukka K. Korpela said:
Thank you. The W3C Markup Validator reports 65 errors. Some of them may
have an impact, e.g. lack of closing tags for heading elements.

There are no scrollbar-related declarations in the CSS code, so the page
does not demonstrate how the scrollbar effects would depend on a doctype.


I fail to see how your page demonstrates the variation.
Click to expand...

See www.pc3.nl. local_1.htm is with doctype, local_2.htm without.

Browser used FF 10.

Fokke
 
J

Jonathan N. Little

F

Fokke Nauta

Jonathan N. Little said:
Well here is a tip. If you find that you are getting buggy display
problems, first see if your markup is valid. Invalid markup can cause all
kinds of weird display problems as the browser "tries to make sense" of
makeup errors.

65 Errors on your little page is not good. You have many elements not
closed that require a closing tag.

<http://validator.w3.org/check?verbose=1&uri=http://www.pc3.nl/test/local_1.htm>
Click to expand...

Thanks.
I noticed that none of the header tags had a closing tag. Obviously my HTML
editor decided they would be closed by the <td> tag anyway. Haven't seen
this before but haven't used this as such.
I removed all heading tags and <p> tags and added alt="" to all images. Now
the page is tentatively passed:
http://validator.w3.org/check?uri=w...(detect+automatically)&doctype=Inline&group=0

The page local_2.htm is the same but has no doctype and shows even better.

All cells have no height specification and gained the height of the font
size. Vertical alignment is no longer an issue.

Fokke
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I get a table embedded in a td tag to be centered with css? 4
Running text through an image 9
CSS Vertically Align Text 5
making a table grow horizontally rather than vertically, possiblyusing frames 5
validated html 5 table 19
Vertically Aligning Images within a <div> 18
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Need help with code on website (noob) 2

Members online

Total: 35 (members: 2, guests: 33)
Robots: 200

Forum statistics

Threads
473,765
Messages
2,569,568
Members
45,042
Latest member
icassiem

Latest Threads

Top