#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81

    Vertical alignment in tableless design cells


    I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default.

    How do you solve this problem?. Obviously I look for a simple CSS style to manage this need.

    Thanks!
    Pere
    www.casti2001.com
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    64
    Rep Power
    11
    I don't think there is a way in css 2 to do it, someone please correct me if I'm wrong though.

    There are many hacks out there, if it's a single element, you could make the line-height of the div the same height as the div, and the text inside of it would be centered. If you are doing more than that, there are multiple different ways, none are just a simple: vertical-align: center.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81
    Originally Posted by foxtail
    I don't think there is a way in css 2 to do it, someone please correct me if I'm wrong though.

    There are many hacks out there, if it's a single element, you could make the line-height of the div the same height as the div, and the text inside of it would be centered. If you are doing more than that, there are multiple different ways, none are just a simple: vertical-align: center.
    Thank you Foxtail.

    This pushes me to go on using tables for situation like the enclosed image where the cell "concepte" will enlarge the height automatically depending on contents.

    Maybe CSS 3 will fix the problem.

    All the best!

    Pere
    www.casti2001.com
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Since that is clearly tabular data, why would you consider any structure other than a table?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81
    Originally Posted by kk5st
    Since that is clearly tabular data, why would you consider any structure other than a table?

    cheers,

    gary
    I have learned here I should hate tables.
    So I tried to use div's instead and avoid more sins.
    Pere
    www.casti2001.com
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    64
    Rep Power
    11
    lol, taking the disdain of tables to an extreme haha.

    Yeah I think the dislike for tables is more about using them for layout of pages and their elements. But if it's going to be used to show tabular style data, then by all means, use a table.
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by Pere
    I have learned here I should hate tables.
    So I tried to use div's instead and avoid more sins.
    There are those who overstate the arguments against tables. They forget that the <table> is a specialized container for tabular data. The table should not be used for page layout purposes, but that does not mean it shouldn't be used. Don't even try to substitute some generic tag like <div>. It has a completely different structural purpose.

    If someone tells you other than what I've told you, thumb your nose at him and tell him he doesn't know what he's talking about.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81
    Originally Posted by foxtail
    lol, taking the disdain of tables to an extreme haha.

    Yeah I think the dislike for tables is more about using them for layout of pages and their elements. But if it's going to be used to show tabular style data, then by all means, use a table.
    Hi Foxtail,

    I remember a sentence in an electronics factory at the Silicon Valley (can't remember the name) announcing something like "neither high tech, nor low tech, but the right tech".

    Therefore and based on your last comment we should say "neither tableless, nor table based, but the right tables" or so (my english is limited. You can write the sentence better).

    Regards!
    Pere
    www.casti2001.com
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81
    Originally Posted by kk5st
    There are those who overstate the arguments against tables. They forget that the <table> is a specialized container for tabular data. The table should not be used for page layout purposes, but that does not mean it shouldn't be used. Don't even try to substitute some generic tag like <div>. It has a completely different structural purpose.

    If someone tells you other than what I've told you, thumb your nose at him and tell him he doesn't know what he's talking about.

    cheers,

    gary
    Hi Gary,

    Yours and Foxtail comments make me consider the right use of Tables and forget those who announce the worst Egypt Plagues for the ones using them.

    In fact all my designs avoid tables except (like suggested by you both) for tabular data.

    I remember some time ago I was building up the code for a standard table with no <table> at all. I got a terrible headache but I was convinced I was winning the heaven...

    So again, thanks for your comments.

    All the best.
    Pere
    www.casti2001.com
  18. #10
  19. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    In modern browsers you can just set the container to display:table-cell and then you can use vertical-align:middle.

    This wont work in IE6 though
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81
    Originally Posted by b3n
    In modern browsers you can just set the container to display:table-cell and then you can use vertical-align:middle.

    This wont work in IE6 though
    Thanks, B3n.

    It works with the limitation you have announced. For those reading this post I enclose the demo script.

    Code:
    <html>
      <head>
        <title>Text align</title>
        <style type="text/css">
          div{
            height: 100px;
            width: 200px;
            border: 1px solid red;
            text-align: center;
            display: table-cell;
            vertical-align: middle
          }
        </style>
      </head>
      <body>
        <div>Test of cell alignment. Not good in IE.</div>
      </body>
    </html>
    Regards.
    Pere
    www.casti2001.com
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Originally Posted by b3n
    In modern browsers you can just set the container to display:table-cell and then you can use vertical-align:middle.

    This wont work in IE6 though
    It doesn't work in IE7 either, but does in IE8 (when IE8 is in "IE8 standards mode").
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    9
    Rep Power
    0
    If you have a box width a specified height and it is a block or inline-block element, you can always use vertical-align:middle.
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, onehundred&two.
    Originally Posted by onehundred&two
    If you have a box width a specified height and it is a block or inline-block element, you can always use vertical-align:middle.
    Eh? vertical-align only affects block elements if it's applied to their parent which happens to be a table-cell.

    However, inline-blocks are a great way to achieve vertical centering.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo