Text Align Centre Floated Horizontal Nav

**Zygoma** · Feb 18, 2013 11:36

Buongiorno from 3 degrees C wetherby UK :-)

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

**ralph.m** · Feb 18, 2013 14:54

You could try this:

Code:

#navigation {
text-align: center;
}

#navigation li {
display: inline-block;
}

**jshin** · Feb 18, 2013 19:54

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.

**ronpat** · Feb 19, 2013 05:23

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

Line 37

Code:

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

Line 43

Code:

#navigation ul {
    margin: 0;
    padding: 0;
    text-align: center;    /* add this property */
}

Line 49

Code:

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

Line 344

Code:

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

Line 383

Code:

#navigation li {
    float: left;      /* delete this property */
    position: relative;

**ronpat** · Feb 19, 2013 23:05

Originally Posted by Zygoma

Ive learned you cant text-align centre li elemnts that are floated.

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:

Code:

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

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

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/show...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>

**Zygoma** · Feb 25, 2013 06:12

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

Grazie Tanto :-)

User Tag List

Thread: Text Align Centre Floated Horizontal Nav

Thread Tools

Display

Text Align Centre Floated Horizontal Nav

Bookmarks

Bookmarks

Posting Permissions