центрирование div без установки ширины

Question

Есть ли способ сделать это? При использовании навигации, которая может часто изменять количество элементов, было бы неплохо не рассчитывать и обновлять css, а просто иметь решение, которое работает.

если это невозможно (я предполагаю, что это так), может кто-нибудь указать мне на javascript, который может это сделать?

---

редактировать

re: предоставить код некоторый код В основном я работаю с наиболее типичной настройкой

.

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

---

редактировать

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

проблема, с которой я столкнулся при использовании этих / этих решений, заключается в том, что содержимое смещено вправо добавление некоторого правого отступа (размером 40px), кажется, исправляет это в браузерах, которые я проверяю (O FF IE). .nav { поле: 0 авто; обивка-направо: 40px; } Я не знаю, откуда это значение и почему 40px это исправляет.

Кто-нибудь знает, откуда это? это не поле или отступ, но независимо от того, что я делаю, первые около 40px не могут быть использованы для размещения. Может быть, это ul или li, которые добавляют это.

Я посмотрел на способ отображения таблиц-ячеек, но есть одна сложность с IE, и она все еще имеет ту же проблему, что и другое решение

---

редактировать (окончательно)

хорошо, я попробовал кое-что в отношении отступа. Я сбросил все отступы до 0

*{padding:0;}

это исправило, и мне не нужно компенсировать отступ (Я думаю, что я оставлю весь процесс, так что если кто-нибудь столкнется с этим, это сэкономит им время)

спасибо за комментарии и ответы

Answer 1

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

Вот и все,

Измените число li, но ul всегда будет выровнено по центру

make div с class = "nav" поместите в него ul, ul всегда будет выровнен по центру

Answer 2

трудно сказать, не видя точно, что вы пытаетесь достичь, но это должно, по крайней мере, помочь ...

Ваш CSS

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

#nav {
    margin:0 auto;
}

#nav ul li {
    display:inline;
}

#content {
    text-align:left;
}

Ваш 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>

Answer 3

здесь хороший обходной путь для центрирования div без ширины .

без таблицы и работает в любом браузере!

(РЕДАКТИРОВАТЬ: заменена мертвая ссылка на одну из archive.org. Кстати, описанная там техника: обернуть DIV в SPAN, чтобы сделать его встроенным.)

Answer 4

Как насчет

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

Кроме того, это будет более доступно для разметки вашего меню следующим образом:

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

и используйте

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

Answer 5

Если вы хотите центрировать div в его контейнере, попробуйте установить для полей margin-left и margin-right контейнера.

Похоже, у кого-то была такая же проблема, как и у вас. Надеюсь, это лучше, чем моя первая рекомендация. :)

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

Answer 6

Исходя из того, что, как я полагаю, вы спрашиваете, вы хотите динамически центрировать div, учитывая, что ширина будет изменяться в зависимости от того, сколько элементов меню видно. Я предполагаю, что вы также хотели бы, чтобы это динамически сосредотачивалось на изменении размера. Это можно сделать с помощью простого JavaScript, как показано ниже. Я смоделировал пример, с которым можно играть, работает в IE и FF. Javascript является ключом. Также следует отметить, что хотя это и не является частью вашего вопроса, возможно, имеет смысл контролировать минимальную ширину при изменении размера ... ping me, если вы столкнетесь с этим.

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