Text Align Centre Floated Horizontal Nav

HTML & CSS
1

Buongiorno from 3 degrees C wetherby UK :slight_smile:

Ive learned you cant text-align centre li elemnts that are floated. For example in this nav http://tutorial.davidclick.com/philpotts-clone.html ( the first one in a mint colour) how could you align the li items so they sit in the middle as in this example http://tutorial.davidclick.com/align-nav.html.

Any insights welcome with a sprinkling of CSS theory much appreciated.

Grazie tanto,
David

2

You could try this:

#navigation {
text-align: center;
}

#navigation li {
display: inline-block;
}
3

It’s also worth mentioning that you can take the “float: left” off of #navigation and #navigation ul. It’s just not needed since we’re using an inline-block.

4

Make the following changes to your css to center the #navigation menu using inline-block list items.

Line 37


#navigation {
    background: none repeat scroll 0 0 #B5F0E5;
    float: left;    [color=blue]/* Deleting this property will show the #navlist border-bottom; see line 344 below. */[/color]
    width: 900px;
}

Line 43


#navigation ul {
    margin: 0;
    padding: 0;
    [color=blue]text-align: center;[/color]    /* add this property */
}

Line 49


#navigation ul li {
    [color=blue]display: inline-block;[/color]    /* change this property */
    list-style-type: none;
    [color=blue]vertical-align: top;[/color]    /* add this property */
}

Line 344


#navlist {
    border-bottom: 1px solid #000000;    [color=blue]/* Do you want this border showing?  If no, delete it. */[/color]
    margin: 0;
    padding: 0 0 20px 10px;
}

Line 383


#navigation li {
    [color=red][s]float: left;[/s][/color]      /* delete this property */
    position: relative;
5

[FONT=Verdana]Zygoma,

Think in terms of containers.

While it is true that one cannot center list items that are floated, one CAN center their container, the <ul> or <ol>.

Normally, a <ul> or <ol> is a block object that takes up the full width of the page, just like a paragraph. The “trick” to centering it is to shrink that ul box around its list items. Two techniques for doing that are {display:inline-block} and {display:table}.

The following two pages show left floated list items centered on the page. In both cases, it is the unordered list box that is being centered. The list items are floated within that container.

There are only 3 lines of difference between the pages, one in the body selector (the parent container of the ul box) and two in the ul selector:
[/FONT]


1.   body {text-align:center}       body {}
2.   ul {display:inline-block}      ul {display:table}
3.   ul {margin:0}                  ul {margin:0 auto}



<!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?977665-Text-Align-Centre-Floated-Horizontal-Nav
Thread: Text Align Centre Floated Horizontal Nav
2013.02.18 12:36
Zygoma
-->
<head>
    <title>Centering Floated List Items</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {text-align:center;}

ul {
    list-style-type:none;
    display:inline-block;
    overflow:hidden;
    padding:0;
    margin:0;
}
li {
    float:left;
}

a {
    display:block;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
    text-decoration:none;
    margin:6px;
}
a:link,a:visited {
    color:#888;
    border:2px solid #aaa;
    background-color:#eee;
}
a:hover {
    color:#00f;
    border:2px solid #00f;
    background-color:#def;
}
a:active {
    color:#fff;
    border:2px solid #00f;
    background-color:#f00;
    text-decoration:underline;
}

    </style>
</head>
<body>

<ul>
    <li><a href="#">List Item One</a></li>
    <li><a href="#">List Item Two</a></li>
    <li><a href="#">List Item Three</a></li>
    <li><a href="#">List Item Four</a></li>
</ul>

</body>
</html>




<!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?977665-Text-Align-Centre-Floated-Horizontal-Nav
Thread: Text Align Centre Floated Horizontal Nav
2013.02.18 12:36
Zygoma
-->
<head>
    <title>Centering Floated List Items</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {}

ul {
    list-style-type:none;
    display:table;
    overflow:hidden;
    padding:0;
    margin:0 auto;
}
li {
    float:left;
}

a {
    display:block;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
    text-decoration:none;
    margin:6px;
}
a:link,a:visited {
    color:#888;
    border:2px solid #aaa;
    background-color:#eee;
}
a:hover {
    color:#00f;
    border:2px solid #00f;
    background-color:#def;
}
a:active {
    color:#fff;
    border:2px solid #00f;
    background-color:#f00;
    text-decoration:underline;
}

    </style>
</head>
<body>

<ul>
    <li><a href="#">List Item One</a></li>
    <li><a href="#">List Item Two</a></li>
    <li><a href="#">List Item Three</a></li>
    <li><a href="#">List Item Four</a></li>
</ul>

</body>
</html>
6

Thanks for getting back to me :slight_smile: Ah yes i never thought about converting so to speak the block element again to {display:inline-block}

Grazie Tanto :slight_smile: