Список по центру в div (для панели навигации)

0

Отправляя заметку вверху этого урока (http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/), я попытался центрировать список двух ссылок на странице, но он центрирует только первый элемент списка, а не весь список.

li{
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
}
ul{
    text-align: center;
}

div#nav-list {

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;

    width: auto;
    height: auto;
    background: #E8E8E8;
}

"nav-list" - это контейнер для панели навигации, показанный на рисунке цветной серый.

Вот issue- вы можете видеть, что "about" имеет центр, но не весь список. Изображение 174551

Заранее спасибо! Изменение: Здесь HTML:

<div id="center_content">
    <h1 id="page-heading">Title</h1>
    <hr id="first-rule"></hr>
    <div id="nav-list">
        <ul>
            <li>about</li> <li>work</li> 
        </ul>
    </div>
    <hr></hr>
    <p>Here is a paragraph. </p>
</div>
  • 1
    Пожалуйста, покажите ваш полный HTML и CSS для навигации. Тогда это будет легче решить.
  • 0
    Обновлено с большим количеством кода.
Показать ещё 1 комментарий
Теги:

5 ответов

1
Лучший ответ

Удалите заполнение списка. По умолчанию список имеет 40px padding-left. Попробуйте использовать ul{ padding:0; } ul{ padding:0; }

  • 0
    Хм, это немного смещает его в правильном направлении, но оно все еще не отцентрировано. Я также попытался добавить маржу: 0, но это ничего не сделало.
  • 0
    Если нет другого определения, которое перезаписывает ваши стили, настройте ul { margin:0 auto; text-align:center; padding:0;} и для li { display:inline-block;} будет вашим ответом. Установите эти стили и проверьте еще раз, если они все еще не работают, проверьте правила перезаписи
Показать ещё 1 комментарий
0

Ну вот:

1) Установите text-align: center; в элементе nav-list

2) Установить d isplay: inline-block в списке

FIDDLE

li {
    font-family: Futura, Arvo, sans-serif;
    display:inline-block;
    padding: 0 10px;
}
ul{

    list-style: none;
    display: inline-block;
    padding:0;
}

div#nav-list {

    text-align: center;
    background: #E8E8E8;
}
0

попробуй это

<div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

div ul li{float:left;list-style:none;margin:0 10px}
div ul{display: inline-block;margin: 0 auto;}
div{text-align:center}

JSFiddle

0

Предложите это для вас: http://jsfiddle.net/theStudent/6UnNs/

CSS

li {
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
    padding: 10px;
}

ul {
    text-align: center;
    background:red;
    width: 25%;
    margin:0 auto;
}
ul li:first-child {

    background:#ccc;
    display:block;
    margin:0 0 0 -40px;
}

HTML

<ul>
    <li>TITLE</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

Просто играйте с настройками, я добавил немного цвета, чтобы вы могли видеть

0

Попробуйте применить эти стили:

ul { 
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 170px; /*as per your need*/
}
  • 0
    Это, похоже, ничего не делает. Выравнивание по первому элементу списка. Также не следует ли применять встроенный блок к элементу списка, а не к самому списку?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню