8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

A good way for centering using CSS and Divs

by checkm8
7 replies
  • WEB DESIGN
    • |
<style>
#wrap { width:800px;
height:auto;
left:50%;
margin-left:-400px;
position:absolute;
background-color:#000000;
}
</style>
<html>
<body>
<div id="wrap">
</div>
</body>
</html>
#centering #css #divs #good
  • Profile picture of the author checkm8
    It has been awhile, but I have found that if you make this the containing element everything inside will be allocated to the center of the page (but NOT centrally justified).
    {{ DiscussionBoard.errors[3651180].message }}
    • Profile picture of the author checkm8
      Also,

      After that point it is usually good to position relatively after the containing div, that way you don't have cross browser problems.
      {{ DiscussionBoard.errors[3651186].message }}
      • Profile picture of the author checkm8
        I work NOT using a WYSIWYG because programs usually jimmyrig the code. I use Dreamweaver as a code writing program only. It checks for mistakes as I go along.
        {{ DiscussionBoard.errors[3651192].message }}
  • Profile picture of the author nelsonbiglar
    dividorclassname { margin: 0px auto; } will center a div. Create a div container and nest divs using same code.
    Signature

    On the other side:
    www.fishingnorthernontario.com

    {{ DiscussionBoard.errors[3679866].message }}
  • Profile picture of the author JF Garsula
    Sample HTML & CSS:

    HTML:

    <body>
    <div id="wrap">

    </div>
    </body>

    CSS:

    #wrap{width:960px;margin:0 auto;}

    The basic explanation of centering a div or any HTML tag is specifying the width of the tag(in your case #wrap) and applying an "auto" value to the left and right margin property.
    Signature

    [CENTER]Optimize Your Business with the Science and Art of Marketing

    {{ DiscussionBoard.errors[3680007].message }}
  • Profile picture of the author 365Daysof
    Yeah, margin 0 auto is the easiest way... *smiles*
    {{ DiscussionBoard.errors[3685424].message }}
  • Profile picture of the author hireava
    1. Place the elements to be centered inside a containing element, such as a DIV.
    2. Set a minimum height on the containing element.
    3. Declare that that containing element is a table cell.
    4. Set the vertical alignment to "middle".
    Signature
    Visit the Site
    {{ DiscussionBoard.errors[3685906].message }}

Trending Topics