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

HTML & CSS
1

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

This is from one of Paul’s older examples, I think.


<!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. :slight_smile:

3

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).


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