Sayfanın ortasına liste koymak

Question

CSS kullanarak orta sayfa olacak bir liste almakta sorun yaşıyorum. Ben bir dış div vb kullanmak gibi birkaç farklı şey denedim ama sadece sayfanın merkezine taşımak için liste alamıyorum.

.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

Kayan ve birbiriyle çeliştiği ortalama:

İşte benim un merkezli HTML ve CSS olduğunu.

Bunun yerine LI display:inline-block ürününü hazırlayın ve üst ortada ortalamak için text-align kullanın.

.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>

Sadece genişliği içeriği daha geniş olacak şekilde bir satır içi elemanı gibi muamele görmek listesi gerekir ve sonra us ana öğesinin içinde onu ortalayabilmek

Answer 2

:

.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

yapabilirsiniz text-align sahip bir div liste sarın: merkez özelliği ortalamak ve satır içi <ul> görüntüleme özelliğini ayarlayın blok:

.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

bu deneyin:

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; 
}