Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts

    How do I center an entire left-floated UL?

    Testing Gound

    See the footer content. I have three rows of info, and want to center all of them.
    I tried {margin:0 auto} {text-align:center} and a few others which aren't even real CSS , but to no avail.
    What am I missing?

    basicStyle.css
    navMenus.css
    transparentBG.css

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mOrloff,
    If you float:left; then margin:0 auto; doesn't center anymore... you could margin it over with margin: 150px 0 0 0; or something, and that would work because the widths aren't going to change inside your container.

    Or you could try this display:inline; instead of floating. Like this:

    Code:
    /* subNav menus defaults */
    ul.navSub{overflow: auto;}
    ul.navSub li{display: inline;}
    ul.navSub li a{
    	display: inline-block; /**I think(?) that keeps your block working**/
    	text-align: center;
    	text-decoration: none;
    	border-left: 1px solid #777;
    }/* footer*/
    .center .footer{
    }
    #navFooter, #contactInfo, #copyright  {
    	text-align: center;
    }
    ul#navFooter{
    	padding: .75em 0 0 0;
    	font-size: .689em;
        letter-spacing: .15em;
    }
    ul#contactInfo{
    	padding: .65em 0 .4em 0;
    	width: 100%;
    }
    ul#contactInfo li{
    	padding: 0 1.75em;
    	color:#CCCCCC;
        font-size: .5em;
        letter-spacing: .1em;
    display: inline;
    }
    p#copyright{
    	padding: 0 2em;
        font-weight: normal;
        font-size: .375em;
        letter-spacing: .15em
        }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    set the ul width and then margin:auto;

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, that centers it as long as no-one resizes their browsers font.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •