Центрирование миниатюр

Я пытаюсь центрировать группу жидких миниатюр, но они всегда выравнивают левый, а не центр.Центрирование миниатюр

вот jsfiddle, который показывает проблему:

вы, возможно, придется увеличить окно вывода, чтобы увидеть сторону миниатюр на стороне и наблюдать неполадку

<div class="container-fluid"> 

    <div class="row-fluid"> 

     <ul class="thumbnails"> 

    <li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
</a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 

<li> 
    <a href="photos for nothing.jpg" rel="prettyPhoto[gallery1]" title="nothing"> 
     <img class="thumbnail" src="blank photos/blankthumb.jpg" alt="nothing"> 
    </a> 
    </li> 


</ul> 
</div> 
</div>

источник

2013-11-14 user2989343

контейнер для жидкости (который является то, что вы используете) означает, что они будут гибкими в своей презентации и адаптировать к ширине контейнера они находятся Если вы хотите иметь фиксированный контейнер и центр * это *, тогда миниатюры должны последовать его примеру. – ochi

нет, я хочу, чтобы он адаптировался к размеру, но проблема в том, что, когда окно недостаточно велико, чтобы объявить новую строку, миниатюры, которые там не центрируются. есть определенно способ сделать его как жидким, так и центрирующим. – user2989343

Самый простой способ заключается в использовании display: inline-block и text-align: center так:

.thumbnails { text-align: center; } 
.thumbnails li { display: inline-block; margin: 0; float: none; }

Начальная беда была Bootstrap добавляет .thumbnails li { float: left }, который скидывает выравнивание. Добавление float: none; для исправления исправления.

Демо: http://jsfiddle.net/shshaw/bVa2Z/9/show/

Код:. http://jsfiddle.net/shshaw/bVa2Z/9/

источник

2013-11-14 18:11:27 shshaw

это не работает. если вы заходите в окно отображения вашего jsfiddle и перемещаете окно шире и менее широко, вы увидите, что группа миниатюр не центрируется на странице. – user2989343

Легче увидеть эту страницу с центрированием, если вы закончите свои URL-адреса с помощью '/ show /': http://jsfiddle.net/shshaw/bVa2Z/7/show/ – ajp15243

@ ajp15243 Спасибо за отзыв! Я забыл о параметре '/ show /' URL. – shshaw

Ваш Ли являются блокировать элементы и, следовательно, заполнять ширину их контейнера и не сидеть рядом друг с другом.

Вам понадобится следующий CSS:

.thumbnails {text-align: center; } 
.thumbnails li {display: inline-block; margin:0 }

Вам нужно CSS, чтобы расположить их в центре. Try this fiddle.

источник

2013-11-14 18:11:02 Pat

это тоже не работает. если вы заходите в окно отображения вашего jsfiddle и перемещаете окно шире и менее широко, вы увидите, что группа миниатюр не сосредоточена на странице. – user2989343

Центрирование миниатюр

ответ

Смежные вопросы