7

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

Daniel
  • 34,125
  • 17
  • 102
  • 150
  • This is hard to answer without knowing what's in your DIV. It sounds like, as a prerequisite, you need to make your DIV elastic (table) width instead of default block width. And that's a whole nother question. – jpsimons Nov 29 '09 at 04:10
  • 1
    Can you provide the HTML\CSS that you're using with your question? If the solution involves Javascript, we're in trouble... – Lachlan McDonald Nov 29 '09 at 07:40
  • Using the solution I listed below, there are no issues with additional padding...I am using inputs to simulate the menu...so that may indicate that the UL style is adding the padding. – PortageMonkey Nov 29 '09 at 19:06
  • yep, the ul was adding the padding – Daniel Nov 29 '09 at 19:10
  • possible duplicate of [Centering a div block without the width](http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width) – Yuck Jan 10 '14 at 13:57

6 Answers6

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

Dashrath
  • 2,141
  • 1
  • 28
  • 33
  • one addition I'd add(though self-explanatory) is adding `padding-left: 0;` to `.nav ul`, this is there is no reset css used – Daniel Aug 29 '12 at 20:27
3

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>
luckykind
  • 469
  • 3
  • 12
  • this works (to some degree :) It's not working where I intend it to, but I'll have to go through the css files to see if there's any conflicts. But the some degree refers to the centering. It centers the left side of the content, so the centering is a bit off. I've tried adding a 40px padding on the right inside #nav, but that means adding a static value to the equation. Although the 40px works, depending on the size of the elements it will tend to hang to one side or the other – Daniel Nov 29 '09 at 17:34
  • yeah... like I said it's hard to tell without seeing exactly what you're doing... but it sounds like a conflict with some other styling... this definitely works on it's own, and you want to stay away from adding static values if you're trying to center something. Try temporarily adding "border:1px solid red;" to the problems areas so you can see better on how it's laying out... – luckykind Nov 29 '09 at 18:25
2

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

Andy West
  • 12,302
  • 4
  • 34
  • 52
2

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}
wheresrhys
  • 22,558
  • 19
  • 94
  • 162
2

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.)

Sz.
  • 3,342
  • 1
  • 30
  • 43
Snowalker
  • 309
  • 1
  • 7
  • 16
1

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>
PortageMonkey
  • 2,675
  • 1
  • 27
  • 32