Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS text-align: center; is not centering things

Tags:

css

text-align

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?

like image 622
RJ Cole Avatar asked Jun 05 '11 13:06

RJ Cole


People also ask

Why text-Align Center doesn't work?

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.

How do I center align text in CSS?

Center Align Text To just center the text inside an element, use text-align: center; This text is centered.

How do I center align everything in CSS?

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.

How align block Items in center?

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.


2 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 } 
like image 192
Pekka Avatar answered Sep 21 '22 17:09

Pekka


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

like image 44
DanKodi Avatar answered Sep 20 '22 17:09

DanKodi