Centering a SPAN

[NeoDreamer]

#someBox {
margin: 0 0 0 40%;
background: red;
}

<span id="someBox">some text</span>


I'm having difficulty centering a span (variable width) in 3 major browsers. If I add "display: block; width: 20em;", everything is consistent with all 3 browsers, but I really didn't want static width.


IE7: no background
Safari: left justified
FF: perfect

[redelite]

centering it on the page?..



background: #f00;
display: block;
margin: 0 auto;
padding: 0 5em;

and if you want the text centered also..



text-align: center;

[NeoDreamer]

I tried that before. I got inconsistent results between my 3 test browsers.

[redelite]

Can I see where your trying to apply this at?

[NeoDreamer]

This is what your CSS looks like:

http://levichi.com/storage/center.html

It should not be display:block, because blocks don't have the same width as the text they contain.

[redelite]

Ok, I just tried this for like 15 minutes with firebug, searched for about 10 on google, and the ONLY way I found for you to be able to center it on the page is if you use like what I said earlier:



background: #f00;
display: block;
margin: 0 auto;
padding: 0 5em;
width: 20%;
or you use



background: #f00;
display: block;
left: 50%;
margin-left: -10%;
padding: 0 5em;
position: relative;
width: 20%;
BOTH, center it on the page.. But obviously, I have a width in there, but I think that's the ONLY way you'll be able to line it up directly center, is if it's a block and it has a width. Sorry mate!

[NeoDreamer]

I don't really need it directly center. I just need it kind of center, like:



margin: 0 0 0 40%;


Can I psuedo center it like this somehow and still have it look okay in all browsers?

[ajcates]

Ok span is an inline element. It goes in between block elements like a p tag.

If you are against tag soup tho you can use this css code to center your span:


.centered {
background: #f00;
display: table;
margin: 0 auto;
padding: 0 5em;
}
display:table is like one of my favorite css tricks because it allows browsers to do the calculation of the item as if it were table. So that means for margin:auto centering you do not have to have a specified width, so it allows the item to be flexible like an inline element and yet some what behave like a block element.

@redelite
You really should read up on how browsers display different items such as tables, blocks and inline elements. I just spent seconds in firebug.

[redelite]

AJ.. I did that as well, and I DO know how they render, but my point being, I could have swore that a display with any table property (display: table, display: table-cell), does NOT work in IE at all. :look: :shrug:

*Edit: found 2 sources on it...
http://webdesign.about.com/od/examples/l/bl_displaytable.htm
http://www.quirksmode.org/css/display.html

[ajcates]

...yea I have completely stopped designing for IE6.

[NeoDreamer]

The table span trick doesn't work for IE7 either.

I have also stopped designing for IE6.... :)