centering variable-width elements

[Jerico]

I was wondering it was possible to have an element with a variable width be automatically centered using CSS.

normally, with a fixed with element I would left:50% and margin-left half of the width. But if it's an element that will be different on each page depending on the query, in this case an h2 tag, then how can i do this??

thanks

[PBSWebDesign]

Have you tried possibly this?

div {
    margin: 0 auto;
    }

just add this to whatever element it is you are working with and that should do the trick hopefully.

[Kor]

Have you tried possibly this?

div {
    margin: 0 auto;
    }

just add this to whatever element it is you are working with and that should do the trick hopefully.

er... no. By "variable width" I think Jerico means "no precise width is set". Or, if the element has no width it can not have margins auto, because a block element with no precise width will extend itself to the width of its parent node.

In the Jerico's case (a text node inside a <h2></h2> tag), a center text-align would be the proper solve

<style type="text/css">
h2 {
text-align:center;
}
</style>

normally, with a fixed with element I would left:50&#37; and margin-left half of the width

Too intricate. Merely in that case (fixed width) you should simply use the left and right margins as auto, as PBSWebDesign suggested.

[PBSWebDesign]

<style type="text/css">
h2 {
text-align:center;
}
</style>

Yes I know of this too but that would only center the content inside the element right? I thought he was wanting the entire element to be centered not just the content?

yeah i dont think the question was asked properly. If he just wants an h2 tag centered than yes go your method of text-align: center; I read it as just centering the entire element on the page. My bad.

[Kor]

Yes I know of this too but that would only center the content inside the element right? I thought he was wanting the entire element to be centered not just the content?

I think you did not understand the concept of "center". A block-level element (like a DIV or H2...and so on) without a precise width will have as width as his container's width will permit. So that the concept of "centering" this kind of element has no meaning.

Elements (tags if you want, even it is not the same thing) may have two main kinds of display: block and inline. I simplified (in fact there are several other type of display), for the sake of the example. A block element can be horizontally center "by itself", but only if it has a certain width. An inline element can not be centered "by itself", because it can not gain a width (ie: SPAN). But it must be the child node of a block element, thus an inline element is to be centered handling its block parent element. Need an example?

[PBSWebDesign]

No I understand all of that I am running on 3 hours of sleep and not thinking clearly this morning or last night when i was up till 7 am working on sites. sorry for the confusion