CSS text-align: center; is not centering things

Question

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 &amp; 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?

A little advice: browsers apply styles from right to left, so you div#footer is parsed two times when the page is load, an unnecessary performance penalty (a small one anyway) which you can avoid because you can only have one #footer per page. (Sorry for my English). — Tae, Jun 05 '11 at 13:50
Thanks Tae! I didn't know that. Beginner with CSS basically. — RJ Cole, Jun 08 '11 at 02:40
Here's an article that goes into detail on when to use `margin:auto;` and `text-align:center;` for centering elements: https://blog.terresquall.com/2021/07/why-doesnt-text-align-center-work-a-primer-on-block-and-inline-elements-in-html-css/ — John Doe, Jul 21 '21 at 11:32

score 50 · Accepted Answer · answered Jun 05 '11 at 13:09

50

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 }

answered Jun 05 '11 at 13:09

Pekka

442,112
142
972
1,088

Yes, the ul was displaying horizontally already. I wanted it to that navigation to be centered in the footer. I think the ul was inheriting the width of the footer div. I set the width of the ul and it centered. Thanks! – RJ Cole Jun 05 '11 at 13:28

score 18 · Answer 2 · answered Jun 12 '15 at 02:13

18

To make a inline-block element align center horizontally in its parent, add text-align:center to its parent.

answered Jun 12 '15 at 02:13

DanKodi

3,550
27
26

2

this worked for me, thanks! I had applied `text-align: center` to the text elements but not to the containing `div` – Andrew Jan 05 '17 at 16:20
1

that did the job. Applying `text-align: center` to the parent worked. – ppel123 Sep 11 '20 at 14:03

score 8 · Answer 3 · answered Jun 05 '11 at 13:10

8

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;
}

answered Jun 05 '11 at 13:10

Jits

9,647
1
34
27

Harman · Answer 4 · 2020-07-10T13:13:19.647

7

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

edited Jul 10 '20 at 13:13

answered Jan 24 '20 at 13:51

Harman

81
1
3

3

Welcome to stackoverflow. Please consider adding a short snippet of code to illustrate your solution. – sao Jan 24 '20 at 14:18

score 2 · Answer 5 · answered May 26 '20 at 01:53

2

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

https://css-tricks.com/almanac/properties/f/flex-grow/

answered May 26 '20 at 01:53

Lane

4,682
1
36
20

score 0 · Answer 6 · edited May 17 '19 at 14:47

0

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

edited May 17 '19 at 14:47

nassim

1,547
1
14
26

answered May 17 '19 at 13:37

smita

1

score -4 · Answer 7 · answered Nov 28 '15 at 09:55

-4

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

answered Nov 28 '15 at 09:55

Shwan Namiq

631
8
21

2

he asked for help with css properties. your recommendation is for using bootstrap to abstract away css, and so it is therefore off-topic. – Andrew Jan 05 '17 at 16:19

CSS text-align: center; is not centering things

7 Answers7

Linked