centering a div without setting width

Is there a way to do this? When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works.

if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this?

edit

re: provide code some code basically I'm working with, what I think is, the most typical setup

<div class="main">
 <div class="nav">
  <ul>
   <li>short title</li>
   <li>Item 3 Long title</li>
   <li>Item 4 Long title</li>
   <li>Item 5 Long title</li>
   <li>Item 6 Extra Long title</li>
  </ul>
 </div>
</div>

edit

.main {
 width:100%;
 text-align:center;
}
.nav {
 margin:0 auto;
}
.nav ul li {
 display:inline;
 text-align:left;
}

the issue I've found with this/these solutions is that the content is nudged to the开发者_如何转开发 right adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE). .nav { margin:0 auto; padding-right:40px; } I don't know where this value is coming from though and why 40px fixes this.

Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement. Maybe it's the ul or li that's adding this.

I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution

edit (final)

okay I've tried some things in regard to the indent. I've reset all padding to 0

*{padding:0;}

that fixed it, and I don't need to offset the padding (I think I'll leave my whole process up so if anyone comes across this, it'll save them some time)

thanks for the comments and replies

<div class="nav">
 <ul>
   <li>menu 1</li>
   <li>menu 2</li>
   <li>menu 3</li>
 </ul>
</div>

<style>
 .nav { text-align:center; }
 .nav ul { display:inline-table;}
 .nav ul li {display:inline;}
</style>

That's all,

Change number of li , but ul will always be centre aligned

make div with class="nav" place ul inside it, ul will be center aligned always

hard to tell without seeing exactly what your trying to achieve but this should at least help...

Your CSS

#main {
    width:100%;
    text-align:center;
}

#nav {
    margin:0 auto;
}

#nav ul li {
    display:inline;
}

#content {
    text-align:left;
}

Your HTML

<div id="main">
    <!-- Your Navigation Menu -->
    <div id="nav">
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </div>
    <!-- Your Content Area -->
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur ...
    </div>
</div>

If you want to center a div in its container, try setting margin-left and margin-right of the container to auto.

It looks like somebody had the same problem you did. Hopefully this is better than my first recommendation. :)

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

How about

  #form1 {text-align:center}  
  #menuWrapper{display:inline-block;text-align:left}

Also, it woudl be more accessible to mark up your menu as follows:

<form id="navWrapper">
   <ul>
      <li><input></input></li>
       ...
   </ul>
</form>

and use

  #navWrapper {text-align:center}  
  #navWrapper ul {display:inline-block;text-align:left}
  #navWrapper li {display:inline}

here a nice workaround for centering a div with no width.

is tableless and is working in any browser!

(EDIT: dead link replaced with one from archive.org. BTW, the technique described there is: wrap your DIV in a SPAN to make it inline.)

Based on what I believe you are asking, you want to center a div dynamically, given that the width will change based on how many menu items are visible. I assume you would also like this to dynamically center itself on resize as well. This can be done with some simple javascript as shown below. I have mocked up an example you can play with, works in IE and FF. The javascript is the key. Also of note, although not part of your question, it may make sense to control the min-width on resize...ping me if you run into that.

<html>
<head runat="server"></head>
<body onload="centerMenu()" onresize="centerMenu()">
<form id="form1" runat="server">
    <div id="menuWrapper" style="display:inline; height:20px;">
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
    </div>
</form>
 <script type="text/javascript">
 function centerMenu() 
 {
     //Wrap your menu contents in a div and get it's offset width
     var widthOfMenu = document.getElementById('menuWrapper').offsetWidth;
     //Get width of body (accounting for user installed toolbars)
     var widthOfBody = document.body.clientWidth;
     //Set the width of the menu Dynamically
     document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu)) / 2;
 }
</script>
</body>
</html>