Отправляя заметку вверху этого урока (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" имеет центр, но не весь список.
Заранее спасибо! Изменение: Здесь 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>
Удалите заполнение списка. По умолчанию список имеет 40px
padding-left. Попробуйте использовать ul{ padding:0; }
ul{ padding:0; }
{ margin:0 auto; text-align:center; padding:0;}
и для li { display:inline-block;}
будет вашим ответом. Установите эти стили и проверьте еще раз, если они все еще не работают, проверьте правила перезаписи
Ну вот:
1) Установите text-align: center;
в элементе nav-list
2) Установить d isplay: inline-block
в списке
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;
}
попробуй это
<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}
Предложите это для вас: 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>
Просто играйте с настройками, я добавил немного цвета, чтобы вы могли видеть
Попробуйте применить эти стили:
ul {
margin: 0 auto;
padding: 0;
text-align: center;
width: 170px; /*as per your need*/
}