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
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.
Thanx. That explains a lot for things to me.