Web Analytics Made Easy -
StatCounter center positioning, whatever monitor size/resolution - CodingForum

Announcement

Collapse
No announcement yet.

center positioning, whatever monitor size/resolution

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • center positioning, whatever monitor size/resolution

    How can I position a <div> so that it is in the center of the page, whatever monitor size/resolution?

  • #2
    eg.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Untitled Document</title>
    <
    style type="text/css">
    body width100%; height100%; }
    #centre {
    positionabsolute;
    top50%;
    left50%;
    width200px;
    height70px;
    margin-top: -35px;
    margin-left: -100px;
    background-color#f00;
    text-aligncenter;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="centre">
    </
    div>
    </
    body>
    </
    html
    markaylward.co.uk

    Comment


    • #3
      thanks

      Comment


      • #4
        Originally posted by mark87
        eg.

        PHP Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
        >

        <
        html>
        <
        head>
        <
        meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <
        title>Untitled Document</title>
        <
        style type="text/css">
        body width100%; height100%; }
        #centre {
        positionabsolute;
        top50%;
        left50%;
        width200px;
        height70px;
        margin-top: -35px;
        margin-left: -100px;
        background-color#f00;
        text-aligncenter;
        }
        </
        style>
        </
        head>

        <
        body>
        <
        div id="centre">
        </
        div>
        </
        body>
        </
        html
        That works fine untill you changw the size of the div

        Comment


        • #5
          Hmm yup, because you see it has -

          width: 200px;
          height: 70px;
          margin-top: -35px;
          margin-left: -100px;

          Well basically the top margin needs to be minus half of the height, and the left margin needs to be minus half of the width.

          So if you have a 300x400px div say, you'd have this -

          width: 300px;
          height: 400px;
          margin-top: -200px;
          margin-left: -150px;
          markaylward.co.uk

          Comment


          • #6
            oh, thanks. I really shouldve thought bout it

            Comment

            Working...
            X