#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Cary, NC
    Posts
    27
    Rep Power
    0

    vertical-align: middle not working in CSS


    I put vertical-align:middle in a stylesheet and the text centers but won't align in the middle. This is my code

    div.centerpics {
    position: absolute;
    vertical-align: top;
    width:250;
    border: 0;
    margin: 0;
    height: 115px;
    top:100px;
    left: 250px;
    }

    div.centerpics h3 {
    color: #0066FF;
    text-align: center;
    vertical-align: middle;
    }

    My html code is
    <div class="centerpics">
    <h3>SCHOOLS</h3>
    </div>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    14
    CSS text-align aligns content horizontally within a block-level element; vertical-align simply adjusts the vertical alignment of an inline element. You can't use it like valign in a table cell. Try this:

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    div.centerpics {
    position: absolute;
    top: 100px;
    left: 250px;
    width: 250px;
    height: 115px;
    border: 0px;
    margin: 0px;
    border: 1px black solid;
    }

    div.centerpics h3 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 20px;
    text-align: center;
    color: #0066FF;
    margin-left: -50px;
    margin-top: -10px;
    }

    </style>
    </head>
    <body>
    <div class="centerpics">
    <h3>SCHOOLS</h3>
    </div>
    </body>
    </html>

    Described here. Don't forget the units ('px')!

    More....

IMN logo majestic logo threadwatch logo seochat tools logo