SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast daveg7's Avatar
    Join Date
    Oct 2008
    Location
    Berkeley, California, U.S.
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box Centers in Internet Explorer Only

    Why does the following code show a centered box only in Internet Explorer, but not in Chrome, Opera, or Firefox?

    <!doctype html>
    <html lang="en">
    <head>
    <title>Test of Centered Image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
    #redblock {
    position: relative;
    background-color: red;
    width: 1000px;
    height: 637px;
    padding: 0;
    border: double #000000 8px;
    }
    .centeredImage {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    </style>
    </head>
    <body>*
    <div class="centeredImage"><div id="redblock">This is the red block.</div></div>
    <p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
    </body>
    </html>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    text-align : center only centres the text inside the element - it doesn't centre the element itself. To centre a div you need to use margins: o auto and also give it a width that is less than the width of its container.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by daveg7 View Post
    Why does the following code show a centered box only in Internet Explorer, but not in Chrome, Opera, or Firefox?
    Probably because IE is misbehaving. You didn't mention which version of IE, but it doesn't really matter. This code shouldn't center the redbox.

    You can add {margin:0 auto} or {display:inline-block;vertical-align:top;} to #redblock and the box will center.

    I do not understand the sentence in the paragraph. There is nothing in the code to position the image 200px from the top of the page nor 200px from the left edge of the window.

    Hope this helps a little.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In IE7 and under (and any version of IE9 and under when in quirks mode) text-align:center will center child block elements. This is not so much a bug as such but more the way the browser was designed and follows a behaviour created in ie5 which didn't understand margin:auto should be used to center elements (and incidentally where inline elements can also have dimensions although they shouldn't do so as it is against the specs).

    The correct way to center block elements is to use margin:auto but the element will need a width of course.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •