ansaurus

Question

CSS centering tricks

Answer 1

+3 A:

Well that seems like massive overkill, I've got to say. I tend to set the container to text-align:center; for old browsers, margin:auto; for modern browsers, and leave it like that. Then reset text-align in the element (if it contains text).

Of course, some things need setting as block, and widths need setting... But what on earth are you trying to style that needs that much hacking around?

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Oli 2008-09-29 11:00:14

The equation is great for position:absolute, though - can you think of any other ways beside the ones already mentioned?

matt lohkamp 2008-09-30 03:43:02

Answer 2

+11 A:

div #centered{
 margin: 0 auto;
}

seems to be the most reliable from my experience.

Causas 2008-09-29 11:05:37

Actually works only with most up-to-date browsers. Almost any version, but the latest one of IE will not handle that correct and even older versions of other vendors fail. Further the questioner has already mentioned that solution, why do you repeat it in your answer?

Mecki 2008-09-29 11:38:38

Also would like to note on this method that it only works for the uppermost div layer, impossible to use the same method for divs inside divs inside divs...

Vordreller 2008-09-29 11:57:42

it should probably be mentioned that giving the containing element text-align:center; will help fix the browsers that won't correctly interpret margin:auto, but you've got to explicity set text-align back to whatever you want it to be on the centered element itself to counter-act that.

matt lohkamp 2008-09-30 03:41:33

Answer 3

+3 A:

Margin:auto works in all browsers as long as you make sure IE is in standards mode.

It's more picky than others and requires your doctype to be the very first in your document, which means no whitespace (space, tabs or linefeeds) before it.

If you do that, margin:auto is the way to go! :)

Fuzzy76 2008-09-29 11:11:59

Also, IE chokes if you are using XHTML and use an XML declaration.

Neall 2008-09-29 11:58:40

Answer 4

+1 A:

just a note that the margin:auto; method only works if the browser can calculate the width of the item to be centered and the width of the parent container. in many cases setting width:auto; works, but in some it does not.

The Brawny Man 2008-09-29 11:17:39

Answer 5

+1 A:

The absolute positioning with 50% approach has the severe side effect that if the browser window is narrower then the element then some of the content will appear off the left side of the browser - with no way to scroll to it.

Stick to auto margins - they are far more reliable.

If you are working in Standards mode (which you should be) then they are supported in all the browsers you are likely to care about.

You can use the text-align hack if you really need to support Internet Explorer 5.5 and earlier.

David Dorward 2008-09-29 11:35:55

Answer 6

A:

Try this; don't know if it works in IE, works fine in Fx though. It centers a DIV block on the page using CSS only (no JavaScript), no margin-auto and the text within the DIV block is still left aligned. I'm just trying to find out if vertical-centering could work that way, too, but so far without success.

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>

Mecki 2008-09-29 11:37:28

eh, too tag soupy - the extra 'helper' and 'center' divs doesn't add any semantic value. This is what we're trying to get away from - xhtml is for content markup, not content layout.

matt lohkamp 2008-10-01 08:10:30

Answer 7

+5 A:

Stick with Margin: 0 auto; for horizontal alignment; If you need vertical alignment as well use position: absolute; top: 50%; margin-top: -(width/2)px; Be aware though, If your container has more width than your screen a part of it will fall off screen on the left side using the Position: absolute method.

D4V360 2008-09-29 11:52:47

What? Like <div style="margin-left: 0 auto;"> ????

Yar 2008-12-27 23:32:42

no, like: <div style="margin: 0 auto;"></div>

matt lohkamp 2009-07-09 07:25:09

Answer 8

+1 A:

This is a handy bookmark for CSS tricks

http://css-discuss.incutio.com/

Contains lots of centering tricks too.

Paul Dixon 2008-09-29 11:53:09

Answer 9

A:

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

This works nicely in all the usual browsers. As already mentioned margin: 0 auto; won't work in all semi-current versions of IE.

_Lasar 2008-09-29 12:37:43

ansaurus

tags:

views:

answers:

CSS centering tricks

related questions