Блог

Главная - Вопросы по программированию - Как центрировать div без ручного определения его ширины

Как центрировать div без ручного определения его ширины

#html #css

#HTML #css

Вопрос:

У меня есть несколько маркированных точек внутри div, и я хочу, чтобы маркированные точки были выровнены по вертикали. Я также хочу, чтобы div находился в центре страницы. Однако я не хочу вручную определять ширину div, потому что я заранее не знаю размер каждой маркированной точки. Как я могу центрировать div без предварительного определения ширины?

Код, который у меня есть на данный момент, является:

 <div style='text-align:left;width:100px;margin:0 auto'>
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>

А JSFiddle можно найти по адресу http://jsfiddle.net/7R2qJ

(Обратите внимание, что в этом коде ширина div определяется вручную, чего я хочу избежать).

Ответ №1:

Добавьте text-align: center к родительскому элементу и text-align: left к div. Я считаю, что это помогает в некоторых версиях IE. Затем добавьте display: inline-block и в div.

http://jsfiddle.net/7R2qJ/8/

 <div>
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>

—

 body
{
    text-align: center;
}

div
{
    background: yellow;
    text-align: left;
    margin: 0 auto;
    display: inline-block;
}

Комментарии:

1. Это не дает div ширину; он просто охватывает всю ширину своего родительского элемента: jsfiddle.net/7R2qJ/6

Ответ №2:

Один из способов — использовать display: table; в сочетании с margin: 0 auto;

JS Fiddle

Ответ №3:

используйте display:inline-block; свойство, чтобы перенести ширину div в его содержимое

скрипка

css

 body
{
    text-align: center;
}

.list
{
    background: yellow;
    text-align: left;
    margin: 0 auto;
    display:inline-block;
}

разметка

 <div class="list">
    <ul>
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
    </ul>
</div>