SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Center align

  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Center align

    Hi there,
    Can you tell how to make a footer div centrally aligned on the page at any resolution?
    Is there any other method than "text-align:center"?

    Thanx

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Divs are blocks. The most popular way to center them within their containers is to set a width on them and use margin: 0 auto (or whatever top/bottom margins you want in place of 0).

    If the div is left alone, it is naturally 100% wide, which of course you can't center.

    So, you might have a footer div with inline content inside it. Inlines are most popularly centered by stating "text-align: center" on their block parents. So if you have
    <div id="footer">
    <span>some text</span>
    </div>

    Putting text-align: center on the div will center the inline span.

    Also
    <div id="footer">
    <p>Some text</p>
    </div>

    Here, a p is a block, but a block who only holds inline stuff. Setting text-align: center on the div will get inherited by the p, so the inlines inside the p will center (the p itself, being a regular block, will still be 100% wide like I said blocks do). So you could also instead just put text-align: center on the p instead.

    When I want to center footer content, I usually set a width (width can be in em's or % or whatever, they don't have to be in px to work, just need to be less than 100%) on the p (or p's) inside the footer and use automargins to center them. The inline text inside the p's can then remain left-aligned.

    If your page (or page container) is a fixed width, an unorthodox way of doing it is to not state a width on the footer div (so it'll be a natural 100% wide) and give the footer div a lot of side padding. Like, a lot.
    This doesn't work if you've stated a 100% width on the footer, because then that becomes a set number and adding padding to it increases the total width (you can't eat more that 100% of a candy bar, can you?). But if you just leave it as a static block's regular "implicit" width, adding a lot of padding to the sides just makes the room inside for content smaller, squishing it into the middle.

    I don't think I've ever done it that way, but in unusual situations, you could do that.

  3. #3
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx. That explains a lot for things to me.


Bookmarks

Posting Permissions

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