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

Вам нужно сделать свои inline-blocks li, а не 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;
}

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

ul {
  text-align: center;
}

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

ul {
  margin: 0;
  padding: 0;
}

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

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

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

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

Вот полная демоверсия

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

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

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

Один из способов добиться этого - установить display: block; margin: auto 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;
}

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

Я обновил css, чтобы использовать text-align: center;

.thumb li {
  text-align:center;
}

http://jsfiddle.net/XZt2b/

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

.thumb li {
    float: left;
}

Также рассмотрим ответ Афзала

http://jsfiddle.net/EbCZ4/