CSS text-align: center; is not centering things

I have the following html:

<div> <ul> <li>Site Map </li> <li>Privacy Policy </li> <li>Terms &amp; Conditions </li> <li>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?

7 Answers

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 want the text within the list items to be centred, try:

ul#menu-utility-navigation { width: 100%; } ul#menu-utility-navigation li { text-align: center; } 

Use display: block; margin: auto; it will center the div

You can use flex-grow: 1. The default value is 0 and it will cause the text-align: center looks like left.

This worked for me :

 e.Row.Cells["cell no "].HorizontalAlign = HorizontalAlign.Center; 

But 'css text-align = center ' didn't worked for me

hope it will help you

I don't Know you use any Bootstrap version but the useful helper class for centering and block an element in center it is .center-block because this class contain margin and display CSS properties but the .text-center class only contain the text-align property

Bootstrap Helper Class center-block