CSS for making list to center

#1
cakka

Posted 16 September 2008 - 06:01 PM

Programmer

Members
192 posts

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
John

Posted 19 September 2008 - 11:13 PM

Writes binary right handed and hex left handed

Moderators
6,321 posts

Do you want to position the list in the center of the div? Or position the div in the center of the page?

Compiled Thoughts

#3
cakka

Posted 20 September 2008 - 02:54 AM

Programmer

Members
192 posts

Yes, in the center of the DIV tag.
How to do that ? Thanks

#4
morefood2001

Posted 20 September 2008 - 07:42 AM

Speaks fluent binary

Members
1,720 posts

First, keep in mind that the following css is invalid:

font-style: none ;

This works correctly on both IE7 and FF3, I've shown borders also:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii">
    <meta name="author" content="Philip Matuskiewicz">
	
    <title>Untitled 1</title>
    <style type="text/css">
    div.content ul li{
  list-style: none;
  margin-left: -1px;
  text-align:center;
  border: 1px;
  border-style: solid;
}
    </style>
</head>

<body>
    <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>
</body>
</html>