Ввод списка в центр страницы

Question

У меня возникли проблемы с получением списка, который будет центральной страницей, используя CSS. Я пробовал несколько разных вещей, таких как использование внешнего div и т. Д., Но просто не могу заставить список перемещаться в центр страницы.

Вот мой ун-центрированной HTML и CSS:

.filter { 
 
    padding-bottom: 40px; 
 
} 
 
.filter li { 
 
    float: left; 
 
    padding-right: 10px; 
 
    border-right: 1px solid #ddd; 
 
    margin-right: 10px; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    list-style: none; 
 
} 
 
.filter li a { 
 
    color: #888; 
 
} 
 
.filter li:last-child { 
 
    border: 0px; 
 
} 
 
.filter li.current a { 
 
    color: #d16f4e; 
 
}

<ul class="filter"> 
 
    <li class="current"> 
 
    <a href="#" title="all">All</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat1">Cat1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat2">Cat2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat3">Cat3</a> 
 
    </li> 
 
</ul>

Answer 1

Плавающие и центрирования противоречат друг другу.

Вместо этого сделайте LI display:inline-block и используйте text-align на родительском, чтобы центрировать их.

.filter { 
 
    padding-bottom: 40px; 
 
    text-align:center; 
 
} 
 
.filter li { 
 
    display:inline-block; 
 
    padding-right: 10px; 
 
    border-right: 1px solid #ddd; 
 
    margin-right: 10px; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    list-style: none; 
 
} 
 
.filter li a { 
 
    color: #888; 
 
} 
 
.filter li:last-child { 
 
    border: 0px; 
 
} 
 
.filter li.current a { 
 
    color: #d16f4e; 
 
}

<ul class="filter"> 
 
    <li class="current"> 
 
    <a href="#" title="all">All</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat1">Cat1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat2">Cat2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="cat3">Cat3</a> 
 
    </li> 
 
</ul>

Answer 2

Вам просто нужно список, чтобы рассматриваться как строковый элемент так, чтобы его ширина не будет шире, чем его содержание, а затем вы можете расположить его в центре в пределах us родительского элемента:

.filter { 
 
    padding-bottom: 40px; 
 
    text-align:center; 
 
} 
 

 
.filter li { 
 
    display:inline; 
 
    border-right: 1px solid #ddd; 
 
    font-size: 12px; 
 
    padding-right: 10px; 
 
    margin-right: 10px; 
 
    list-style: none; 
 
} 
 

 
.filter li a { 
 
    color: #888; 
 
} 
 

 
.filter li:last-child { 
 
    border: 0px; 
 
} 
 

 
.filter li.current a { 
 
    color: #d16f4e; 
 
}

<div id="main"> 
 

 
    <ul class="filter"> 
 
    <li class="current"> 
 
     <a href="#" title="all">All</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat1">Cat1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat2">Cat2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat3">Cat3</a> 
 
    </li> 
 
    </ul> 
 
    
 
</div>

Answer 3

Вы можете завернуть список в DIV с текстом выравнивать: центр недвижимости центровки, и установить дисплей свойство <ul> встраивать блок:

.filter { 
 
    padding-bottom: 40px; 
 
    display:inline-block; 
 
    padding-left:0; 
 
} 
 
.filter li { 
 
    float: left; 
 
    padding-right: 10px; 
 
    border-right: 1px solid #ddd; 
 
    margin-right: 10px; 
 
    font-size: 12px; 
 
    line-height: 12px; 
 
    list-style: none; 
 
} 
 
.filter li a { 
 
    color: #888; 
 
} 
 
.filter li:last-child { 
 
    border: 0px; 
 
} 
 
.filter li.current a { 
 
    color: #d16f4e; 
 
} 
 
div { 
 
    text-align: center; 
 
}

<div> 
 
    <ul class="filter"> 
 
    <li class="current"> 
 
     <a href="#" title="all">All</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat1">Cat1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat2">Cat2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" title="cat3">Cat3</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 4

Пожалуйста, попробуйте следующее:

HTML:

<div class="list_container"> 
<ul class="filter"> 
     <li class="current"> 
     <a href="#" title="all">All</a> 
     </li> 
     <li> 
     <a href="#" title="cat1">Cat1</a> 
     </li> 
     <li> 
     <a href="#" title="cat2">Cat2</a> 
     </li> 
     <li> 
     <a href="#" title="cat3">Cat3</a> 
     </li> 
    </ul> 
    </div> 

CSS:

.list_container{ 
    margin: 0 auto; 
    text-align: center; 
    width: 960px; 
} 

.filter { 
    padding-bottom: 40px; 
    text-align:center; 
} 
.filter li { 
    display:inline; 
    padding-right: 10px; 
    border-right: 1px solid #ddd; 
    margin-right: 10px; 
    font-size: 12px; 
    line-height: 12px; 
    list-style: none; 
} 
.filter li a { 
    color: #888; 
} 
.filter li:last-child { 
    border: 0px; 
} 
.filter li.current a { 
    color: #d16f4e; 
}