[Solved ]How To: Centering DIV Within Footer Widget

[minterdewitt]

Okay, so this is more of a CSS issue than JavaScript, but I need to center the counter within the widget. This is what I have for the CSS side:

/* COUNTER */

    #counter {
        font-size: 4em;
        display: block;
        margin: 0 auto;
        width: 100%;
    }

And it’s not centering the content. Yes, I could put a margin that’s half the width of the counter, but that width will change every time the counter changes, so I need to do it programmatically. Once I do this, I’ll be finished with this damn counter! Here‘s the website and it’s located in the first footer widget.

[shaneisme]

You’re trying to center something that’s 100% width, it has no room to center.

If you’re trying to center text within a block-level element, simply use text-align: center.

A <div> is display: block by default, so that’s not necessary. An element that is display: block is also width: 100% by default…

This should be all you need:

#counter {
  font-size: 4em;
  text-align: center;
}

[minterdewitt]

That indeed worked. Sigh. Sometimes I feel like a total idiot at all this. Thank you muchly!

[shaneisme]

Don’t worry man, I’ve been doing this since the mid-90’s and even I still make day 1 mistakes.

[minterdewitt]

Haha! Yeah, @TheDoc has helped me out numerous times when I’ve made a silly mistake.

[Author]

Posts