[CSS] Div-Tag and Vertical Align

Discussion in 'HTML' started by Guest, Aug 19, 2006.

  1. Guest

    Guest Guest

    Hello,

    I´ve a problem with a simple DIV Tag.

    It looks like this:

    div#border{
    height: 600px;
    left: 188px;
    width: 410px;
    vertical-align: middle;
    border: solid 1px #526e86;
    }



    and the HTML-Page:

    <html>
    <head>
    <link type="text/css" href="./css/styles2.css" rel="stylesheet">

    </head>

    <body>
    <div id="border">bla</a>
    </body>
    </html>



    I want the DIV Tag vertically centered, but it does not work.

    What do I do wrong?



    Regards,

    Martin
     
    Guest, Aug 19, 2006
    #1
    1. Advertisements

  2. David Dorward, Aug 19, 2006
    #2
    1. Advertisements

  3. Guest

    dorayme Guest

    Divs are 100% wide in relation to their containers (eg. body) by
    default. So if you want one centred, you need to give it a width
    smaller than the container in which you want it to appear but big
    enough to hold the content that is inside it (this needs careful
    though often). Then you need to instruct it to centre. This
    usually works:

    margin-left: auto;
    margin-right: auto
     
    dorayme, Aug 19, 2006
    #3
  4. Guest

    dorayme Guest

    oops... I misread... my last was about side to side centering. I
    don't know anything about vertical anything, I never ever think
    about vertical anything... it frightens me.
     
    dorayme, Aug 19, 2006
    #4
  5. Guest

    Guest Guest

    Thanks for your hint!
    I´m half ready now ;)

    My code as smallest example looks like this:

    <html>
    <head>

    <title>TEST</title>

    <style type="text/css">
    <!--
    div#border{

    height: 600px;
    width: 410px;
    vertical-align: middle;
    text-align: center;
    border: solid 1px #526e86;
    margin: 0 auto;
    }
    -->
    </style>

    </head>

    <body>
    <div id="content">&nbsp;</a>
    </body>

    </html>



    How can I center it horizontally?

    E.g. I want it centered in the middle of the page like this:


    --------------------------------------
    | |
    | |
    | |---------| |
    | | DIV | |
    | |---------| |
    | |
    | |
    |-------------------------------------|





    Regards,

    Martin
     
    Guest, Aug 21, 2006
    #5

  6. Thanks for your help!

    I have combined working example now but it uses the table-tag.

    Does anybody know a solution taking the same effects only with using div
    and without using a table tag?


    Regards,

    Martin



    <html>
    <head>

    <title>TEST</title>

    <style type="text/css">

    <!--

    html,body {
    margin: 0;
    padding: 0;
    }

    table {
    width: 100%;
    height: 100%;
    }

    td {
    vertical-align: middle;
    text-align: center;
    }

    div#border{

    height: 600px;
    width: 410px;
    vertical-align: middle;
    text-align: center;
    border: solid 1px #526e86;
    margin: 0 auto;
    }

    div#container {
    position: relative;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    height: 432px;
    border: solid 1px #526e86;
    }
    -->
    </style>

    </head>

    <body>
    <table>
    <tr>
    <td>
    <div id="container">&nbsp;</a>
    </td>
    </tr>
    </table>
    </body>

    </html>
     
    =?ISO-8859-15?Q?Martin_P=F6pping?=, Aug 21, 2006
    #6
  7. Guest

    dorayme Guest

    Will be able to look tomorrow... but have you tried applying the
    above advice to height too?
     
    dorayme, Aug 22, 2006
    #7
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.