Anonymous
Anonymous asked in Computers & InternetProgramming & Design · 1 decade ago

How do you center divs?

I need help centering my divs. I googled it and didn't find the exact help I need. I created my photoshop design and used the slice tool then saved it as div's just I wanna know how can I center all the divs so that the browser shows it in the middle?

<style type="text/css">

<!--

div.Table_01 {

position:absolute;

left:0px;

top:0px;

width:1024px;

height:768px;

}

div.template-1-0-01 {

position:absolute;

left:0px;

top:0px;

width:438px;

height:92px;

}

div.template-1-0-02 {

position:absolute;

left:438px;

top:0px;

width:586px;

height:140px;

}

div.template-1-0-03 {

position:absolute;

left:0px;

top:92px;

width:23px;

height:48px;

}

div.template-1-0-04 {

position:absolute;

left:23px;

top:92px;

width:68px;

height:48px;

}

div.template-1-0-05 {

position:absolute;

left:91px;

top:92px;

width:145px;

height:48px;

}

div.template-1-0-06 {

position:absolute;

left:236px;

top:92px;

width:118px;

height:48px;

}

div.template-1-0-07 {

position:absolute;

left:354px;

top:92px;

width:72px;

height:48px;

}

div.template-1-0-08 {

position:absolute;

left:426px;

top:92px;

width:12px;

height:48px;

}

div.template-1-0-09 {

position:absolute;

left:0px;

top:140px;

width:1024px;

height:37px;

}

div.template-1-0-10 {

position:absolute;

left:0px;

top:177px;

width:1024px;

height:1px;

}

div.template-1-0-11 {

position:absolute;

left:0px;

top:178px;

width:12px;

height:590px;

}

div.template-1-0-12 {

position:absolute;

left:12px;

top:178px;

width:1px;

height:303px;

}

div.template-1-0-13 {

position:absolute;

left:13px;

top:178px;

width:413px;

height:248px;

}

div.template-1-0-14 {

position:absolute;

left:426px;

top:178px;

width:12px;

height:552px;

}

div.template-1-0-15 {

position:absolute;

left:438px;

top:178px;

width:574px;

height:552px;

}

div.template-1-0-16 {

position:absolute;

left:1012px;

top:178px;

width:12px;

height:590px;

}

div.template-1-0-17 {

position:absolute;

left:13px;

top:426px;

width:413px;

height:55px;

}

div.template-1-0-18 {

position:absolute;

left:12px;

top:481px;

width:414px;

height:249px;

}

div.template-1-0-19 {

position:absolute;

left:12px;

top:730px;

width:1000px;

height:38px;

}

-->

</style>

2 Answers

Relevance
  • ?
    Lv 4
    1 decade ago
    Favorite Answer

    Hi,

    Wrap the whole lot in a container or simplay another 'master' <div>

    thus;

    div.master {

    position:absolute;

    left:50%;

    top:50%;

    }

    Then in your HTML;

    <div class="master">

    <div class="template-1-0-19 ">

    code for that template here

    </div>

    </div>

    Hope this helps.

    Regards.

    Source(s): Software Engineer.
  • 1 decade ago

    A way to center a DIV is to set:

    margin: 0 auto;

    However, this will not work in Internet Explorer. For a cross-browser fix check this short, yet detailed tutorial regarding CSS Horizontal Align:

    http://www.w3schools.com/css/css_align.asp

    Gabriel, Web Developer, http://www.bitrepository.com/

    Source(s): Credits: http://www.w3schools.com/
Still have questions? Get your answers by asking now.