[CSS] Div-Tag and Vertical Align

Discussion in 'HTML' started by =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006.

  1. 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
     
    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006
    #1
    1. Advertising

  2. Martin Pöpping wrote:

    > I want the DIV Tag vertically centered, but it does not work.
    >
    > What do I do wrong?


    http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

    What does the manual say it applies to?

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Aug 19, 2006
    #2
    1. Advertising

  3. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    dorayme Guest

    In article <ec839c$2cl$>,
    Martin Pöpping <> wrote:

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


    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
     
    dorayme, Aug 19, 2006
    #3
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    dorayme Guest

    In article <ec839c$2cl$>,
    Martin Pöpping <> wrote:

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


    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
     
    dorayme, Aug 19, 2006
    #4
  5. dorayme schrieb:

    > 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


    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
     
    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 21, 2006
    #5
  6. dorayme wrote:

    > 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



    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. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    dorayme Guest

    In article <ecd0kq$9gc$>,
    Martin Pöpping <> wrote:

    > dorayme schrieb:
    >
    > > 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

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


    Will be able to look tomorrow... but have you tried applying the
    above advice to height too?

    --
    dorayme
     
    dorayme, Aug 22, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,210
  2. Jochen Fuhrmann

    vertical-align and div

    Jochen Fuhrmann, Oct 6, 2003, in forum: HTML
    Replies:
    1
    Views:
    24,502
    Steve Pugh
    Oct 6, 2003
  3. Tobias Müller

    div and vertical align

    Tobias Müller, Nov 25, 2003, in forum: HTML
    Replies:
    2
    Views:
    697
    Steve Pugh
    Nov 25, 2003
  4. Paul Lautman
    Replies:
    6
    Views:
    50,181
    Yucky Korpulent
    Apr 3, 2006
  5. Replies:
    7
    Views:
    1,384
    dorayme
    Nov 14, 2007
Loading...

Share This Page