Как я могу выровнять div по центру, не зная ширину?

Question

Я искал это, и перспективы кажутся мрачными. Я не заинтересован в использовании таблицы. У меня есть 6 или около того встроенных блоков «элемент», которые составляют меню. Это гладко, за исключением того, что все «элементы» установлены на ширину: авто; чтобы разместить их текст. Без явной ширины я не могу выровнять их по центру. У меня есть контейнер div и дочерний тег div, который окружает мои элементы a.

Есть мысли? Спасибо Mike

Answer 1

Вы можете установить стиль элемента a на margin: 0 auto , но это не работает в IE6. В IE6 вы должны установить для div-обёртки значение text-align: center и (необязательно) установить выравнивание текста для элемента a обратно в text-align: слева

Answer 2

<div style="width: auto; margin-left: auto; margin-right: auto">
 div content
</div>

выровняет центр на странице

Answer 3

Мой совет такой ответ - однако кто-то заметил, что в IE6 это не сработает. Вот как это сделать:

<div id="container">
    <div id="centeredBlock">centered</div>
</div>

#container {
    text-align: center;
}

#centeredBlock {
    margin: 0 auto;
    text-align: left;
    width: 50%;
}

Answer 4

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

Так что если вы хотите центрировать div, вы должны установить ширину ...

Решение вашей проблемы (если я ее понимаю) может быть:

<div style="text-align:center;"><span>[... yours content ...]</span></div>

где ваш div стал промежутком, а новый div помещает промежуток в центр. Надеюсь, это поможет вам! До свидания, Alberto

Answer 5

Вот также хороший пример для ситуации: http://www.cssplay.co.uk/menus/centered.html

Answer 6

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

http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/

Answer 7

Если вам нужно, чтобы он центрировался и динамически сжимался / расширялся, чтобы вместить контент, не зная ширины, тогда ваш единственный вариант - использовать таблицу. Это единственный эластичный элемент в HTML-репертуаре.

<table style="margin-left:auto;margin-right:auto;">
    <tr>
        <td>
            Whatever...
        </td>
    </tr>
</table>

P.S. Вы также можете использовать div для динамического сжатия, установив для свойства float значение float: left или float: right. Так что он будет придерживаться влево или вправо, но вы не можете центрировать его таким образом.

Answer 8

Без указания явной ширины тег <div> автоматически расширится до 100% ширины своего родителя. Поэтому установка margin: 0 auto; сделает его центром - с 0px слева и справа.

Answer 9

Вам нужно установить margin: 0 auto; для внешнего контейнера div, добавить text-align: center; для внутреннего div; и используйте неупорядоченный список для создания вашего меню.