www.webdeveloper.com
Results 1 to 6 of 6

Thread: centering variable-width elements

  1. #1
    Join Date
    Apr 2005
    Location
    Vancouver, BC
    Posts
    129

    centering variable-width elements

    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

  2. #2
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Have you tried possibly this?
    Code:
    div {
        margin: 0 auto;
        }
    just add this to whatever element it is you are working with and that should do the trick hopefully.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by PBSWebDesign View Post
    Have you tried possibly this?
    Code:
    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
    Code:
    <style type="text/css">
    h2 {
    text-align:center;
    }
    </style>
    Quote Originally Posted by Jerico
    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.
    Last edited by Kor; 02-17-2011 at 08:57 AM.

  4. #4
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    <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.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by PBSWebDesign View Post
    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?

  6. #6
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles