Центрировать <ul> список

Question

Центрировать <ul> список

0

Я пытался найти решение этой проблемы, но до сих пор ничего не работало. Надеюсь, я смогу помочь.

Я пытаюсь получить нормальный <ul> список для центра на странице. То, как я думал, чтобы решить это, заключается в встраивании списка внутри div, а затем просто центрируйте div, используя margin: 0 auto; , Но моя проблема заключается в том, что, по-видимому, список, по умолчанию, составляет 100% ширины его родителя. Итак, как я могу настроить фактическую ширину списка так долго, как самый длинный элемент списка?

Вот иллюстрация того, что я пытаюсь сделать:

ИЛИ, альтернативно (я в порядке с любым решением):

Благодарю.

Chris 14 апр. 2014, в 15:42

Источник

1

Опубликуйте код, который вы пробовали, который не сработал, пожалуйста.
j08691 14 апр. 2014, в 13:27
0

Очень трудно сказать, что не так, не видя ваш код.
Bucket 14 апр. 2014, в 13:27
0

@Chris - Другой вариант - использовать display: table; + margin: auto .
JunM 14 апр. 2014, в 13:44

Показать ещё 1 комментарий

Теги:

html

css

html-lists

centering

4 ответа

1

Вам просто нужно настроить свойство отображения ul на "inline-block" следующим образом:

Вы также должны выровнять текст элемента ul слева, чтобы он не был центрирован.

И последнее. У неупорядоченных списков есть много отступов, которые могут сбросить центрирование. Поэтому я удалил прокладку, чтобы она была лучше сосредоточена. Вы можете отрегулировать прокладку в соответствии с вашими потребностями.

http://jsfiddle.net/k84Rz/

#centeredDiv {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#centeredDiv ul {
    display: inline-block;
    text-align: left;
    padding: 0;
}

Smeegs 14 апр. 2014, в 12:16

1

HTML-код

<h1>title </h1>
<li> list item 1 </li> 
<li> list item item 2 </li> 
<li> list item item item 3 </li> 
<li> list item 4 </li>

И CSS

h1, li{

    text-align:center; 
}

Simon 14 апр. 2014, в 10:48

0

Благодарю. Это сделало возможным второй макет. Не могу поверить, что я пропустил что-то такое простое;)
Chris 14 апр. 2014, в 13:41

0

Вы можете использовать display: table; + margin: auto

скрипка

ul{
    border: 1px solid red;    
    display: table;
    list-style-type: none;
    margin: auto;
}

JunM 14 апр. 2014, в 12:12

Ещё вопросы

Опубликуйте код, который вы пробовали, который не сработал, пожалуйста.
Очень трудно сказать, что не так, не видя ваш код.
@Chris - Другой вариант - использовать display: table; + margin: auto .
Благодарю. Это сделало возможным второй макет. Не могу поверить, что я пропустил что-то такое простое;)

Natalie Hedström · Accepted Answer · 2014-04-14T11-02-00.000Z

Чтобы настроить ширину до самого длинного элемента, добавьте display: inline-block; к вашему элементу ul

JSfiddle

Благодарю. Это сделало возможным первый макет. Хорошо выглядит сейчас :)