I have the following html:
<div id="footer"> <ul id="menu-utility-navigation" class="links clearfix"> <li class="menu-685 menu-site_map first">Site Map </li> <li class="menu-686 menu-privacy_policy">Privacy Policy </li> <li class="menu-687 menu-terms___conditions">Terms & Conditions </li> <li class="menu-688 menu-contact_us last">Contact Us </li> </ul> </div>
With the following CSS:
div#footer { font-size: 10px; margin: 0 auto; text-align: center; width: 700px; }
I threw in the font-size bit just to see if the style was working (Firebug reports it is working but I wanted to see). It is working. But the text is not centered in the footer in Firefox or in Safari (have yet to check it in IE).
I tried with and without margin: 0 auto; and with and without text-align: center; no combo of those things worked.
Here is output from Firebug:
div#footer { font-size: 10px; margin: 0 auto; text-align: center; width: 700px; } Inherited fromdiv#page #skip-to-nav, #page { line-height: 1.5em; } Inherited frombody.html body { color: #666666; font-family: verdana,arial,sans-serif; }
Help?
Short answer: your text isn't centered because the elements are floated, and floated elements "shrink" to the content, even if it's a block level element.
Center Align Text To just center the text inside an element, use text-align: center; This text is centered.
You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Centering a block or image Or, phrased differently: we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
I assume you want all the items next to each other, and the whole thing to be centered horizontally.
li
elements are display: block
by default, taking up all the horizontal space.
Add
div#footer ul li { display: inline }
once you've done that, you probably want to get rid of the list's bullets:
div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
To make a inline-block element align center horizontally in its parent, add text-align:center
to its parent.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With