Member Avatar for cakka

Hi , i want to create a list with center position.
How to do this the list in DIV format , this is the codes that i created.

For HTML :

<div class="content">
<ul class="menu"><li class="leaf first"><a title="Solvent Distillation" href="/solvent-distillation.htm">Solvent Distillation |</a></li>
<li class="leaf"><a title="The Spray Gun Cleaner from NexGen" href="/spray-gun-cleaner.htm">Spray Gun Cleaner |</a></li>
<li class="leaf"><a title="Solvent Recycling" href="/solvent-recycling.htm">Solvent Recycling |</a></li>
<li class="leaf"><a title="Glove Box Cleaner and Manual Washer" href="/glove-box-cleaner.htm">Glove Box Cleaner |</a></li>
<li class="leaf last"><a title="Degreasing Machinefrom NexGen" href="/degreasing-machines.htm">Degreasing Machine</a></li>
</ul>
</div>

For CSS:

div.content ul li{
  list-style: none;
  margin-left: -1px;
  font-style: none ;
}

Please tell me what the code that must i added or change.
Thanks

  • 2 Contributors
  • 3 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by siriyal

Dani AI

Generated

Short summary and a safer fix: wants the UL centered inside a page-wide wrapper without changing the whole DIV. 's HTML align will work visually but is deprecated and affects all content in that DIV. The common reason text-align "failed" is the UL's browser default margins/padding and the UL being a full-width block — it needs either to become an inline-level box or use a layout method that centers its contents.

Practical options (pick one):

/* inline-block method (good, works back to older browsers) */
.content { text-align: center; }
.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li { display: inline-block; margin: 0 .5em; }
/* modern Flexbox method (concise, responsive) */
.content .menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

If the goal is to center a vertical list as a whole (not make items inline), use a centering method that centers the UL itself, for example margin: 0 auto with a constrained width or display: table; margin: 0 auto;.

Troubleshooting tips and gotchas: remove default UL padding/margins (browsers usually add left padding), apply list-style: none to the UL to remove bullets, and correct invalid CSS (for example font-style accepts normal, not none). If other global rules are interfering, increase selector specificity (e.g., .content > .menu) rather than changing the parent DIV globally. For best long-term results choose the Flexbox approach for modern projects and use the inline-block pattern as a compatible fallback.

Recommended Answers

All 3 Replies

Member Avatar for siriyal

hello cakka please give your alignment to to div tag and check it

<div class="content" align="center">
<ul class="menu">
<li class="leaf first"><a title="Solvent Distillation" href="/solvent-distillation.htm">Solvent Distillation |</a></li>
<li class="leaf"><a title="The Spray Gun Cleaner from NexGen" href="/spray-gun-cleaner.htm">Spray Gun Cleaner |</a></li>
<li class="leaf"><a title="Solvent Recycling" href="/solvent-recycling.htm">Solvent Recycling |</a></li>
<li class="leaf"><a title="Glove Box Cleaner and Manual Washer" href="/glove-box-cleaner.htm">Glove Box Cleaner |</a></li>
<li class="leaf last"><a title="Degreasing Machinefrom NexGen" href="/degreasing-machines.htm">Degreasing Machine</a></li>
</ul>
</div>
Member Avatar for cakka

Sirial thanks for your suggestion, but that DIV tag is global for all content :)
If i change that , it just give all content align be center.

The simple solutions is CSS.
But how to do that ?
I have try with text-align, but that is failed.

Thanks

Member Avatar for siriyal

ok plz add me as reputation

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.