2

Is there a way without writing a bunch of css and nesting divs or writing jQuery scripts with negativ width values?

If not, what´s your preferred way of implementing this?

I have no idea why such a simple task is not part of the html specification.

Edit: With 'absolutely' I also mean vertically centered! Sorry. Plus: It should work with dynamical widths (don´t want to specify them).

I´d like to have something like this:

<div class="ninja-center"></div>

And the div appears in the center of the screen. It really should be THAT easy. No freaky css, scripts, etc. I mean it also works with 2, 3 or 4 ways like this with only horizontal centering:

  • margin: auto
  • text-align: center
  • align="center" (obsolete)
  • ...

Why is there nothing for vertical alignments.

Neysor
  • 3,893
  • 11
  • 34
  • 66
timmkrause
  • 3,367
  • 4
  • 32
  • 59
  • What does it need to be centered from? The document, or a parent div? There is always the simple soloution of `text-align:center;` :) – Marco Johannesen Apr 02 '12 at 10:05
  • Do you mean centering an image using `position: absolute` or do you just mean putting a `div` dead center? Also, do you mean centering vertically, horizontally or both? – My Head Hurts Apr 02 '12 at 10:15

4 Answers4

3

If your specifications aren't simple, the solution isn't either. If you have a simple request (one div, you want it in the center) you'll get a simple solution: just use margin:auto on a div with a width.

Like this random google link shows: http://bluerobot.com/web/css/center1.html

Excerpt you want:

width:500px;
margin:0px auto;

See this in action in @myheadhurts 's jfiddle from the comments: http://jsfiddle.net/8vjGA/

Nanne
  • 64,065
  • 16
  • 119
  • 163
  • Remember the parent element needs a specified width too. – Kyle Apr 02 '12 at 10:24
  • Well, as I said / tried to say: as long as you're doing it with simple specs it's just this simple. As soon as you have a parent, or multiple parents, or all sorts of other things, you'll get in trouble, and that's the reason why it's complicated :). But you're right :) – Nanne Apr 02 '12 at 10:28
  • If the body is the parent element, that needs a width too :) – Kyle Apr 02 '12 at 10:32
1

This explains some great options for centering:

http://css-tricks.com/centering-in-the-unknown/

markvandencorput
  • 941
  • 1
  • 8
  • 17
0

Use display:inline-block, vertical-align:middle, and height:100% to vertically center content that has an undefined height across browsers:

  • html, body, .container, .placeholder { height: 100%;}
  • .placeholder, .wrapper { display: inline-block; }
  • .placeholder, .wrapper, .content { vertical-align: middle; }

The placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect.

Use a fixed width container to wrap the images:

  • .fixed { min-width: 1px; }

Use the following to horizontally center content that has an undefined width across browsers:

  • .content { display:inline; }
  • .container { text-align:center; }

Combine both techniques to create a centered element:

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
0

For example:

 div#giveanidnumb {
    margin:0px auto;
}

Then you can add all the css specs you want

langel
  • 99
  • 9