центр несколько вложенных тегов div в одном теге контейнера div

поэтому у меня есть один большой тег div. css стиль для этого:центр несколько вложенных тегов div в одном теге контейнера div

.thumbcontainer { 
    width: 900px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    display: block; 
    overflow: hidden; 
}

У меня есть 4 тега div в этом. стиль CSS для них:

.thumbnails { 
    float: left; 
    margin-top: auto; 
    margin-right: 10px; 
    margin-bottom: auto; 
    margin-left: 10px; 
}

и, наконец, код:

<div class="thumbcontainer"> 

<div class="thumbnails"> 
<a href="gallery/1.jpg" style="" rel="lightbox[gallery]"><img src="gallery/1-thumbnail.jpg" width="150" height="112" alt=""/></a> 
</div> 

<div class="thumbnails"> 
<a href="gallery/2.jpg" rel="lightbox[gallery]"><img src="gallery/2-thumbnail.jpg" width="150" height="112" alt=""/></a> 
</div> 

<div class="thumbnails"> 
<a href="gallery/3.jpg" rel="lightbox[gallery]"><img src="gallery/3-thumbnail.jpg" width="150" height="112" alt=""/></a> 
</div> 

<div class="thumbnails"> 
<a href="gallery/4.jpg" rel="lightbox[gallery]"><img src="gallery/4-thumbnail.jpg" width="150" height="112" alt=""/></a> 
</div> 

</div> <!-- End of thumbcontainer div -->

это работает, но там все левое выровнен с явно 20 (10x2) пикселей между ними. Я попытался изменить thumbcontainer на выравнивание текста, не сделал ничего.

источник

2013-09-20 user2797519

Вы хотите центрировать '.thumbnails', чтобы каждый из них был на новой строке или всей группе? – PHPglue

Вы можете удалить поплавок и установить отдельные разделительные панели для отображения: встроенный блок.

Чтобы центрировать div.thumbnail, вам нужно установить родительский элемент в text-align: center.

Таким образом, вы будете добавлять следующее:

.thumbcontainer { 
    text-align:center; 
} 

.thumbnails { 
    float: none; // or remove float property 
    display:inline-block; 
}

источник

2013-09-20 22:04:43 Caroline

Спасибо, но это не сработает. Думаю, я забыл упомянуть, что все миниатюры находятся на одной линии? в любом случае, что делает их всех в вертикальной колонке и все еще не центрируется. – user2797519

Взгляните на это: http://jsfiddle.net/ekDud/ – Caroline

Удаление поплавка, отображаемое как «встроенный блок», и центрирование родительского div должно работать (см. Скрипку выше) - если это не так, вы, вероятно, есть что-то еще, переопределяющее вышеупомянутые стили/ы в вашей таблице стилей. – Caroline

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

.thumbcontainer { 
    width: 900px; 
    margin:0px auto; 
    display: block; 
    overflow: hidden; 
    text-align:center; 
} 

.thumbnails { 
display:inline-block; 
margin:0px 10px;

}

источник

2013-09-20 22:09:04 kwnccc

так же, как и другие люди, ответьте, не работает. Это изображения со ссылками и теперь выстраиваются в вертикальном столбце после добавления этого. там также на левой стороне – user2797519

Не совсем уверен, что вы пытаетесь достичь? В основном я не уверен в контейнере DIV.

this Что вы ищете?

Если нет, объясните, пожалуйста, что еще не работает по назначению - спасибо!

PS: Я добавляю объяснение, когда вы на 100% удовлетворены. ;-)

источник

2013-09-20 22:48:15 Netsurfer

центр несколько вложенных тегов div в одном теге контейнера div

ответ

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