Tip: Centering Module Header Text - The Right Way

[Ron]

Hi all,

I have read some answers about centering module text, but this is using margin styling that just pushes the element by some percentage left or right which is not a true centered look. What if your header text happens to be 'Supercalifragilisticexpialidocious'?? no, just kidding :-)

Moving on, with this extra line of css code alone and now with the text-align:center finisher, you will truly get the right effect!

.xg_module_head h2 {
 float: none;
 text-align:center;
}


The Solution: the header module h2 styling has also a declared float:center on the base css code. You just need to cancel it by styling to float:none, THEN apply the normal text-align:center style attribute to get the right effect.

Hope this helps.

[classic]

Hi  Ron 

Possible to put pictures to illustrate the service of this code?

[Ron]

Sure classic, just updated the post (see above) How's it going?

[classic]

ًwoooow

Beautiful my friend.
Thank you

[Ron]

glad you like it. sure thing classic.

[Ceddy J]

THANK YOU THANK YOU THANK YOU! Since I have rounded the corners of the my modules for some time, this code helps the titles look cutoff.

[Ron]

you're welcome, glad you found it useful.

[Jayne]

Thank you works a treat

[Ron]

You're welcome guys! glad you like this.

[G Ollison]

Thank you, Ron! The right (clean, non-hacked) way has always been the easiest to use as well!

[Ron]

sure thing G. right on!