#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    13
    Rep Power
    0

    Dynamically vertical centralisation


    I have a table structure that I am using to display a timetable and list of duties for a small project at work. The left column has a list of people that will be assigned to tasks, and the top row is the day of the week. The individual cells between contain the actual task - a 3 or 4 letter code.

    I have managed to vertically centralised the cells by padding top and bottom to force the text into a set position. However, The names column often goes over the length of the line and wraps underneath, meaning that I need to dynamically centralise that column.

    I have tried margin-top:auto and margin-bottom:auto but that has no effect. The text is still flush to the top of the "box".
    As everything is floated left, any difference in the size of the box will cause the entire table to skew.

    The names and duties are pulled from a SQL database and it is all put together in sequence, line by line.

    Below are the stylesheet codes that I am using, with annotations to show what they are used for.

    -- Main wrapper for the page -- This is working
    #plwrap{width:770px;
    font-size:14px;
    margin-left:auto;
    margin-right:auto;}

    -- Names column -- This is the one that I am having issues with.
    #pl_catname{
    margin-left:20px;
    margin-top:auto;
    margin-bottom:auto;
    width:240px;
    border-bottom:1px #8c7283 solid;
    float:left;
    height:50px;
    font-size:16px;
    text-align:left;
    padding-right:10px;
    float:left;
    color:#8c7283;
    }

    -- Column headings -- This is OK
    #pl_cathead{
    margin-left:20px;
    padding-top:auto;
    padding-bottom:auto;
    width:240px;
    border-bottom:1px #8c7283 solid;
    float:left;
    height:70px;
    font-size:18px;
    text-align:left;
    padding-right:10px;
    color:#8c7283;
    float:left;}

    -- Individual cells -- This is working and ok.
    #pl_duty{
    height:20px;
    width:125px;
    border-bottom:1px #8c7283 solid;
    font-size:20px;
    color:#8c7283;
    float:left;
    padding-top:13px;
    padding-bottom:17px;
    }

    Any assistance would be gratefully received.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep Power
    0
    Have you tried adding "vertical-align: middle;" to your rule?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    13
    Rep Power
    0
    Originally Posted by rehowes
    Have you tried adding "vertical-align: middle;" to your rule?
    Yes - it had no effect, however I've started to revise the code and will see if it will work now.

IMN logo majestic logo threadwatch logo seochat tools logo