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?
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
