Text vertically centered with CSS

Discussion in 'HTML' started by Fokke Nauta, Feb 15, 2012.

  1. Fokke Nauta

    Fokke Nauta Guest

    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
    Fokke Nauta, Feb 15, 2012
    #1
    1. Advertising

  2. Fokke Nauta wrote:
    > 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.



    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>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 15, 2012
    #2
    1. Advertising

  3. Fokke Nauta

    Fokke Nauta Guest

    "Jonathan N. Little" <> wrote in message
    news:jhghfc$7ei$...
    > Fokke Nauta wrote:
    >> 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.

    >
    >
    > URL???
    >


    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>
    >


    <cut>

    >
    > Jonathan


    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
    Fokke Nauta, Feb 15, 2012
    #3
  4. 2012-02-15 17:22, Fokke Nauta wrote:

    > 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.


    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.


    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?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 15, 2012
    #4
  5. Fokke Nauta wrote:

    > The problem was, that I removed the doctype. I did that to be able to
    > give the scrollbar a colour.


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

    --
    -bts
    -This space for rent, but the price is high
    Beauregard T. Shagnasty, Feb 15, 2012
    #5
  6. Fokke Nauta

    Fokke Nauta Guest

    "Jukka K. Korpela" <> wrote in message
    news:jhgk1r$nlo$...
    > 2012-02-15 17:22, Fokke Nauta wrote:
    >
    >> 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.

    >
    > 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.


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


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

    >
    >> But without the doctype the vertical align did not work. I copied the
    >> doctype from your code into mine and now it works.

    >
    > 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?


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

    > Yucca, http://www.cs.tut.fi/~jkorpela/
    >
    Fokke Nauta, Feb 15, 2012
    #6
  7. Fokke Nauta

    Fokke Nauta Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:jhglil$qge$...
    > Fokke Nauta wrote:
    >
    >> The problem was, that I removed the doctype. I did that to be able to
    >> give the scrollbar a colour.

    >
    > I prefer the colours provided by my own browser, thank you very much.
    > They are not part of your web page.
    >
    > --
    > -bts
    > -This space for rent, but the price is high


    Sometime it's nice.

    Fokke
    Fokke Nauta, Feb 15, 2012
    #7
  8. 2012-02-15 18:30, Fokke Nauta wrote:

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


    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.

    >>> But without the doctype the vertical align did not work. I copied the
    >>> doctype from your code into mine and now it works.

    >>
    >> 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?

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


    I fail to see how your page demonstrates the variation.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 15, 2012
    #8
  9. Fokke Nauta

    Fokke Nauta Guest

    "Jukka K. Korpela" <> wrote in message
    news:jhgoep$joo$...
    > 2012-02-15 18:30, Fokke Nauta wrote:
    >
    >> I copied the page to my server. Here is is: www.pc3.nl/test/local.htm

    >
    > 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.
    >
    >>>> But without the doctype the vertical align did not work. I copied the
    >>>> doctype from your code into mine and now it works.
    >>>
    >>> 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?

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

    >
    > I fail to see how your page demonstrates the variation.
    >
    > --
    > Yucca, http://www.cs.tut.fi/~jkorpela/


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

    Browser used FF 10.

    Fokke
    Fokke Nauta, Feb 15, 2012
    #9
  10. Fokke Nauta wrote:
    > "Jukka K. Korpela"<> wrote in message
    > news:jhgoep$joo$...
    >> 2012-02-15 18:30, Fokke Nauta wrote:
    >>
    >>> I copied the page to my server. Here is is: www.pc3.nl/test/local.htm

    >>
    >> 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.
    >>
    >>>>> But without the doctype the vertical align did not work. I copied the
    >>>>> doctype from your code into mine and now it works.
    >>>>
    >>>> 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?
    >>>
    >>> It is thru, though.I was surprised as well.

    >>
    >> I fail to see how your page demonstrates the variation.
    >>
    >> --
    >> Yucca, http://www.cs.tut.fi/~jkorpela/

    >
    > See www.pc3.nl. local_1.htm is with doctype, local_2.htm without.
    >
    > Browser used FF 10.


    All 404s


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 15, 2012
    #10
  11. Fokke Nauta

    Fokke Nauta Guest

    "Jonathan N. Little" <> wrote in message
    news:jhgpgo$p89$...
    > Fokke Nauta wrote:
    >> "Jukka K. Korpela"<> wrote in message
    >> news:jhgoep$joo$...
    >>> 2012-02-15 18:30, Fokke Nauta wrote:
    >>>
    >>>> I copied the page to my server. Here is is: www.pc3.nl/test/local.htm
    >>>
    >>> 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.
    >>>
    >>>>>> But without the doctype the vertical align did not work. I copied the
    >>>>>> doctype from your code into mine and now it works.
    >>>>>
    >>>>> 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?
    >>>>
    >>>> It is thru, though.I was surprised as well.
    >>>
    >>> I fail to see how your page demonstrates the variation.
    >>>
    >>> --
    >>> Yucca, http://www.cs.tut.fi/~jkorpela/

    >>
    >> See www.pc3.nl. local_1.htm is with doctype, local_2.htm without.
    >>
    >> Browser used FF 10.

    >
    > All 404s
    >
    >
    > --
    > Take care,
    >
    > Jonathan


    Sorry, my fault. The pages are in www.pc3.nl/test

    Fokke
    Fokke Nauta, Feb 15, 2012
    #11
  12. Fokke Nauta wrote:

    >
    > Sorry, my fault. The pages are in www.pc3.nl/test


    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%3A%2F%2Fwww.pc3.nl%2Ftest%2Flocal_1.htm>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 15, 2012
    #12
  13. Fokke Nauta

    Fokke Nauta Guest

    "Jonathan N. Little" <> wrote in message
    news:jhgtbl$i5j$...
    > Fokke Nauta wrote:
    >
    >>
    >> Sorry, my fault. The pages are in www.pc3.nl/test

    >
    > 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%3A%2F%2Fwww.pc3.nl%2Ftest%2Flocal_1.htm>
    >
    >
    > --
    > Take care,
    >
    > Jonathan


    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
    Fokke Nauta, Feb 16, 2012
    #13
  14. Fokke Nauta

    dorayme Guest

    dorayme, Feb 16, 2012
    #14
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jukka K. Korpela

    Re: CSS float vertically?

    Jukka K. Korpela, Jul 26, 2003, in forum: HTML
    Replies:
    0
    Views:
    670
    Jukka K. Korpela
    Jul 26, 2003
  2. Andrew Emberson

    centered page width for text

    Andrew Emberson, Oct 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    388
    bengee
    Oct 10, 2003
  3. Lenny
    Replies:
    1
    Views:
    432
    Andy Holmes
    Oct 16, 2003
  4. Trevor

    CSS Vertically Align Text

    Trevor, Apr 28, 2006, in forum: HTML
    Replies:
    5
    Views:
    9,434
    Barbara de Zoete
    Apr 29, 2006
  5. mark4asp
    Replies:
    4
    Views:
    513
    Ben C
    Feb 18, 2008
Loading...

Share This Page