Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css Vertical align text in <div>

    Over the last few years i let my knowledge of html and css slip in to the void and now im trying to figure out how to vertically align my text in a div tag but to no avail!

    heres what i have

    DIV.FI {
    background: #b9bab9;
    position: absolute;
    text-align: center;
    vertical-align:middle;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    margin-bottom: 150px;
    }


    any help is appreciated!

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    display:table-cell;
    vertical-align:middle;

    vertical align only works in table cells.

    note: it only does what you want in table cells, vertical-align on div's normally sets how it ligns up with text as an inline element, therefore setting the display to table-cell will fix your problem
    Last edited by spikeon; 08-05-2010 at 01:40 AM.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So a div itself does not have a vertical align function?

    thanks anyway ill play with the table

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it does, however, it sets how the div is alligned within text as an inline element, for instance, vertical-align: bottom would make the bottom of the image in line with the bottom of the text, whereas middle would make the middle of the image be in line with the middle of the text.

    using "display: table-cell;" you trick the div into acting like a td, so vertical align will work.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    note, you don't have to make a table, just put display:table-cell; in your css for the div

    so...
    Code:
    DIV.FI {
    display:table-cell;
    background: #b9bab9;
    position: absolute;
    text-align: center;
    vertical-align:middle;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    margin-bottom: 150px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •