The center of a horizontal block element that has dynamic width - CSS is only a cross browser

Question

This is an ancient topic, but I swear it turned out to be harder than it should be.

I created jsfiddle to show the problem. http://jsfiddle.net/motocomdigital/VfDfw/1/

I thought I hacked it, but it does not work in IE 8 compatibility mode.

Problem

I have a navigation menu in a pretty unordered list. A wrapper div that contains a fixed width, which is the main width of the website.

An unordered list should float in the center of the wrapper. But none of the block elements in the navigation has a set width.

http://jsfiddle.net/motocomdigital/VfDfw/1/

I colored each element in a different background color so that you can see each element.

I thought I found a purchase with half the width of the wrapper on div.nav as the left position, and then -50% margin-left on .nav ul - but it does not seem to work in IE 8 compatibility mode, see the fiddle below ...

http://jsfiddle.net/motocomdigital/VfDfw/2/

Can anyone suggest a solution or a more efficient CSS method. He bakes my noodles.

thanks

---

Update

I thought I should update my question why I use each div in my sample script.

Watch my new violin. http://jsfiddle.net/motocomdigital/VfDfw/3/

Now I have added a top 10px position for each element so you can see why I used so many divs. But the only problem is that this solution does not support IE 7. Therefore, I need another solution for the centering elements of the block. I want a CSS rule float: center !

• The blue div is my horizon 100% div width for my navigation an endless background image.
• The red div is the wrapper that is the maximum width of my website. Script width: 420 pixels.
• The green div is the floating width of my dynamic navigator, located on the left: 210 pixels (50% of the width)
• Yellow ul is the floating width of dynamic nav li elements with a negative margin of 50%
• Blue li are containers with anchor buttons with dividers.

Hope this makes sense. But this solution almost worked, but it’s a shame that it doesn’t work. IE7

Answer 1

Using a display block and an inline block with a text alignment center can help you. It worked in very old browsers. Change the block to the built-in block in the wrapper, nav, ul, to make them go full width o “shrink” and center. (It is not possible to test the script in old IE, but "should" work)

When you center the text in a div and the text is not actually text, but inline blocks, they behave as if they were where the “words” are, which makes the content a centered list of elements without any fixed width.

body { font-family: Helvetica, Arial, Geneva, sans-serif; } #horizon { height: 49px; width: 100%; overflow: visable; position: relative; background: url(images/nav-bg.jpg) no-repeat center top #041e75; top: 100px; } #wrapper { max-width: 420px; margin: 0 auto; height: 49px; overflow: visible; background: red; padding:10px; text-align:center; } .nav { display:block; height: 49px; background: green; padding:5px; text-align:center; } .nav a { color: #ffffff; } .nav ul { background: yellow; padding:5px; display:block; text-align:center; } .nav ul li { display: inline-block; background: blue; overflow: visible; } .nav ul li a { display: block; height: 49px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50); padding-right: 10px; padding-left: 10px; } .nav ul li a:hover { text-decoration: none; background-color: rgb(6, 29, 93 ); background-color: rgba(13, 43, 119, 0.95); } 

 <div id="horizon"> <div id="wrapper"> <div class="nav"> <ul> <li><a href="#" title="home">Home</a></li> <li><a href="#" title="about">About</a></li> <li><a href="#" title="menu">Menu</a></li> <li><a href="#" title="map">Map</a></li> <li><a href="#" title="contact">Contact</a></li> </ul> </div> </div> </div>