Центрирование элементов li неупорядоченного списка с использованием CSS

Question

У моей ul есть несколько свободных элементов li, в которых есть изображения, и я хотел бы центрировать эти элементы li. Я попытался найти решение, но мне трудно найти его. Могли бы вы, ребята, предложить какой-то способ сделать это. Я думал об окружении ul с div, а затем центрировал ul в div. Считаете ли вы, что это сработает? Я также хотел упомянуть, что я хотел сохранить свойство float left.

Вот код:

<ul class="thumb"> 
    <li><img src="photos/home9.jpg" /></li> 
    <li><img src="photos/home1.jpg" /></li> 
    <li><img src="photos/home3.jpg" /></li> 
    <li><img src="photos/home4.jpg" /></li> 
</ul> 

CSS:

.thumb { 
list-style: none; 
width: 90%; 
margin: auto; 
height: 750px; 
} 

.thumb li { 
float: left; 
} 

.thumb li img { 
height: 200px; 
width: 200px; 
border: 1px solid #ddd; 
padding: 5px; 
background: #f0f0f0; 
} 

Answer 1

Если вы хотите сохранить поплавок: оставил; то вам нужно будет добавить контейнер ДИВ к ул с запасом ширина и : авто;

Вот как:

http://codepen.io/anon/pen/jneEq

Но это только заставит уль появляться по центру, если вы установите ширину точно по ширине изображения.

Answer 2

Если вы хотите центр изображения, то вам нужно будет добавить следующее:

ul { 
    text-align: center; 
} 

Если вы центр ul, который является ребенком для div, ul будет размещен в центре, но li предметов не будет. Поэтому было бы лучше, если вы разместите элементы списка в центре, вы можете добавить margin: 0; padding: 0 в ul тоже! как

ul { 
    margin: 0; 
    padding: 0; 
} 

Надеюсь, что у вас будут изображения, размещенные в центре, когда нет других полей и прокладок! :)

Вы можете попробовать все это здесь: http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/

Answer 3

вы можете проверить это?

Я обновил CSS использовать text-align: center;

.thumb li { 
    text-align:center; 
} 

http://jsfiddle.net/XZt2b/

Answer 4

Если вы не везёт с другими вариантами, вы можете использовать:

li { 
    display:block; 
    width: 200px; 
    margin: 0 auto; 
} 

Это позволит убедиться, что они всегда находятся в середине доступного пространства.

Answer 5

Вы также можете удалить

.thumb li { 
    float: left; 
} 

Как считают ответа Afzaal в

http://jsfiddle.net/EbCZ4/

Answer 6

Вы должны сделать свой Ли inline-blocks, вместо float. Короче говоря, это приведет к тому, что ваш li займет место как элемент блока, но будет вести себя как встроенный элемент, который заставит их следовать за text-align:center;, которые вы хотите добавить в свой элемент ul. Визуально они будут выглядеть как «центрированные поплавки» из-за отсутствия лучшего термина.

Вот CSS и jsfiddle (http://jsfiddle.net/rgthree/RTt8g/):

.thumb { 
    list-style: none; 
    width: 90%; 
    margin: auto; 
    height: 750px; 
    text-align:center; /* center inline and inline-block elements */ 
} 

.thumb li { 
    display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */ 
} 

.thumb li img { 
    height: 200px; 
    width: 200px; 
    border: 1px solid #ddd; 
    padding: 5px; 
    background: #f0f0f0; 
} 

Answer 7

Одним из способов достижения этой цели является набор display: block; margin: auto на <img> элементов.

http://codepen.io/jessegavin/pen/jBpdo

.thumb { 
    list-style: none; 
    width: 90%; 
    height: 750px; 
} 

.thumb li img { 
    display: block; 
    margin: auto; 
    height: 200px; 
    width: 200px; 
    border: 1px solid #ddd; 
    padding: 5px; 
    background: #f0f0f0; 
} 

Answer 8

Я пытаюсь сделать это с немного JQuery, попробуйте:

var totalWidth = 0; 
$('.thumb > ul > li').each(function(){ 
    totalWidth+= $(this).width(); 
}); 
$('.thumb > ul').css('width', totalWidth + 'px'); 

Вот полный demo