SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i float a horizontal <ul> to the center?

    I want to build a menu bar ith float. but i can't seem to find anything that relates to a center float. this is my code:

    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    </style>
    <body>
    <ul>
    <li><a class="block" href="/first_page/Firstpage.html">Your details</a></li>
    <li><a class="block" href="/second_page/Secondpage.html">My pictures</a></li>
    <li><a class="block" href="float.html">Flowers</a></li>
    </ul>
    </body>


    as you can see the float is left . i want it to be center aligned. any suggestions?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    This is from one of Paul's older examples, I think.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1182959-How-do-i-float-a-horizontal-lt-ul-gt-to-the-center
    2013.12.16 12:47
    pardis
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>Centering Widthless Floats</title>
        <style type="text/css">
    
    .outer {
        overflow:hidden;
    }
    
    .wrap {
        float:left;
        margin-bottom:2em;
        position:relative;
        left:50%;
    }
    
    #menu {
        margin:0;
        padding:0.5em;
        font-family:Verdana,sans-serif;
        position:relative;
        left:-50%;
    }
    
    #menu li {
        float:left;
        list-style-type:none;
        margin:0 0 0 0.5em;
        padding:0.25em;
        background-color:#600;
        color:#ff9;
        border:2px solid #f00;
    }
    
    #menu a {
        color:#ff9;
        text-decoration:none;
    }
    
    .clear {
        clear:left;
        height:1px;
        margin-top:-1px;
    }
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="wrap">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </div>
    </div>
    <!--Internet Explorer needs this-->
    <div class="clear"></div>
    
    </body>
    </html>
    Please click the link at the bottom of my post and read our posting guidelines to learn how to post your code in a "code" box.
    Thanks.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    This is from one of Paul's older examples, I think.
    Yes that's an old example and although it works I would be inclined to use the inline-block method instead of floating these days (even though you have to jump through hoops to clear the white-space bug/feature).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	list-style:none;
    	margin:0;
    	padding:0;
    	overflow:hidden;
    	text-align: center;
    	width:100%;
    	display:table;/* Webkit Fix */
    	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    }
    .nav li {
    	display:inline-block;
    	word-spacing:0; /* reset from parent ul*/
    }
    * html #nav li { display:inline; } /*IE6*/
    *+html #nav li { display:inline; } /*IE7*/
    .nav a {
    	display:block;
    	width:120px;
    	font-weight:bold;
    	color:#FFF;
    	background-color:#98bf21;
    	text-align:center;
    	padding:4px;
    	text-decoration:none;
    	text-transform:uppercase;
    }
    .nav a:visited { color:#FFF; }
    .nav a:hover, .nav a:active, nav a:focus { background-color:#7A991A; }
    </style>
    </head>
    
    <body>
    <ul class="nav">
    		<li><a href="#home">Home</a></li>
    		<li><a href="#news">News</a></li>
    		<li><a href="#contact">Contact</a></li>
    		<li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

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