ansaurus

Question

HTML: center a block of content when you don't know in advance its width.

Answer 1

+3 A:

This is going to be the lamest answer, but it works:

Use the deprecated <center> tag.

:P

I told you it would be lame. But, like I said, it works!

*shudder*

Jason Bunting 2008-09-05 17:34:19

Answer 2

+8 A:

@Jason, yep, <center> works. Good times. I'll propose the following, though:

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
     <head>
        <style type="text/css">
           body
           {
              text-align: center;
           }

           div.my-centered-content
           {
              margin: 0 auto; /* Centering */
              display: inline;
           }
        </style>
        <title></title>
     </head>
     <body>
        <div class="my-centered-content">
           <p>test</p>
           <p>test</p>
        </div>
     </body>
  </html>

EDIT @Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.

Joe Liversedge 2008-09-05 17:48:53

display: inline-block worked fine in Firefox but in IE makes width to be 100%

Dawkins 2008-09-08 18:27:11

Answer 3

+1 A:

I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.

Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.

Neall 2008-09-05 17:49:09

Answer 4

A:

JasonBunting:

It is deprecated and not css but at least it works in IE and FF!

Dawkins 2008-09-05 17:51:15

Answer 5

A:

The following works well enough. note the position, and the use of auto

<div style="border: 1px solid black; 
      width: 300px; 
      height: 300px;">
            <div style="width: 150px; 
               height: 150px; 
               background-color: blue;
                        position: relative;
               left: auto;
               right: auto;
               margin-right: auto;
               margin-left: auto;">
             </div>
</div>

NOTE: not sure if it works in IE.

codeLes 2008-09-05 17:56:44

Answer 6

A:

<html>
<head>

    <title>untitled</title>
    <style type="text/css">
    #wrapper {
        width: 100%;
     border: 1px solid #333;
    }
    #content {
     width: 200px;
     background: #00FF00;
    }
    </style>

</head>

<body>

           <div id="wrapper" align="center">

                 <div id="content" align="left"> Content Here </div>

           </div>

</body>
</html>

ironkeith 2008-09-05 19:19:51

Answer 7

A:

Thanks for your answers. What I want to know is how to do it without a fixed width and also being a block.

Dawkins 2008-09-05 19:48:08

Answer 8

A:

In FF3, you can:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)

Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.

It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.

Bobby Jack 2008-09-08 18:42:29

ansaurus

tags:

views:

answers:

HTML: center a block of content when you don't know in advance its width.

related questions