Member Avatar for lithium1976

How can I centre this horizontal list inside a Div? My page layout is fluid.

<ul id="navlist">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li class="last"><a href="#">test5</a></li>
</ul>

<!--
#navlist {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}

#navlist li {
float: left;
padding:0px 5px;
border-right:1px solid #009;
}

#navlist a {
color:#009;
text-decoration:none;
}

#navlist a:hover {
color:#39F;
text-decoration:underline;
}

#navlist li.last {
border:none;
}

-->

  • 2 Contributors
  • 5 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lithium1976

Dani AI

Generated

Good progress — was right that floats make centering harder, and ’s text-align + inline approach is a valid legacy fix. Below are cleaner, more robust alternatives (modern and fallback), plus a few gotchas to watch for.

Modern (recommended): use flexbox on the UL and center with justify-content. This keeps the markup simple and handles wrapping and vertical alignment naturally.

.centered-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px; /* spacing between items; fallback to margin on li if needed */
}

Legacy-friendly alternative: inline-block plus centering on the parent. Inline-block introduces inter-item whitespace; the font-size:0 trick or removing literal whitespace can fix it.

.centered-nav-wrapper { text-align: center; }
.centered-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block; /* treat ul as shrink-to-fit if you prefer */
  font-size: 0; /* removes gaps between inline-block children if you keep LIs as inline-block */
}
.centered-nav li {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px; /* restore readable size */
  margin: 0 6px;
}

Separator and markup cleanup: instead of adding a ".last" class, use a pseudo-element so you don’t need extra markup:

.centered-nav li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #009;
  margin: 0 8px;
  vertical-align: middle;
}

Troubleshooting checklist: remove floats on list items; reset UL margin/padding; if flexbox gap seems ignored use margins on LI; watch baseline alignment with inline or inline-block (use vertical-align); add adequate link padding for touch targets; use a semantic wrapper (<nav>) or role="navigation" for accessibility.

Recommended Answers

All 5 Replies

Member Avatar for autocrat

If I remember correctly, you want Inline not float.

You want to divs... one full width, acting as parent, the other as child.
you can center the child.
I think you can flaot the child too... but the List should be inline...

I think.

Let me know if that works... if not, I'll go look at some of my sites.

Member Avatar for lithium1976

Hey thanks i'd really apprecitate it!

Member Avatar for autocrat

Okay... so to clarify (so I know what site to look at)...

You want a Fluid Horizontal Navigation with links centering themselves.

If so... I will go fetch the relevant code.
Please note that all my sites are "expandable", meaning that when text size changes, so does the container ;)

EDIT.
This means that though things may originally be ona a single "level"... resizing the window or changing text size could lead to the links dropping to another "level" - (though I view this as better than sliding out of sight either side of the page etc.)

Member Avatar for lithium1976

Yeah I want the list which I supplied the code with in this post to be positioned centrally.

Member Avatar for lithium1976

I think I've worked it out -

#navcontainer ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
text-align: center;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: #0000CC;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 1px;
/* matches link padding except for left and right */
padding-top: 1px;
border-right: 1px solid blue;
}

#navcontainer ul li a
{
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-top: 0px;
color: #000099;
text-decoration: none;

}

  #navcontainer ul li.last {
    border:none;
}

</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="last"><a href="#">Item five</a></li>
</ul>
</div>
Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.