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

Question

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

0

поэтому у меня есть один большой тег div. стиль css для этого:

.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 на выравнивание текста, не сделал ничего.

user2797519 21 сен. 2013, в 00:33

Источник

Теги:

html

css

3 ответа

Ещё вопросы

Caroline · Answer 1 · 2013-09-20T20-58-00.000Z

3

Вы можете удалить поплавок и установить отдельные миниатюрные divs для отображения: inline-block.

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

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

.thumbcontainer {
   text-align:center;
}

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

Caroline 20 сен. 2013, в 20:58

0

Спасибо, но это не работает. Я думаю, что я забыл упомянуть, что все миниатюры находятся на одной строке? Во всяком случае, это делает их все в вертикальном столбце и там еще не по центру.
user2797519 20 сен. 2013, в 22:09
0

Посмотрите на это: jsfiddle.net/ekDud
Caroline 20 сен. 2013, в 22:15
1

Удаление float, отображение в виде «inline-block» и центрирование родительского div должно работать (см. Выше), если это не так, у вас, вероятно, есть что-то, что переопределяет вышеуказанные style / s в вашей таблице стилей.
Caroline 20 сен. 2013, в 22:18
0

что я должен делать? я буквально скопировал скрипку выше. Вот скриншот из Dreamweaver, показывающий, что он делает: imm.io/1gDTY подождите, я думаю, что нашел его. У меня есть стиль IMG, позвольте мне проверить очень быстро ...
user2797519 20 сен. 2013, в 22:37
0

Эхх, Мечтатель ...
Caroline 20 сен. 2013, в 22:46
0

Возможно, ваш img установлен на display: block - проверить это?
Caroline 20 сен. 2013, в 22:46
0

Хорошо, я исправил это, установил img для показа: block У меня был этот набор для изображения заголовка, но я изменил его на img.block, и теперь миниатюры работают. Хотя в Dreamweaver там по центру столбец, но когда я предпросмотр, они идут в ряд.
user2797519 20 сен. 2013, в 22:48
0

Приятно слышать - должно быть, это было неприлично
Caroline 20 сен. 2013, в 23:17

Показать ещё 6 комментариев

Netsurfer · Answer 2 · 2013-09-20T20-26-00.000Z

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

Является ли это то, что вы ищете?

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

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

kwnccc · Answer 3 · 2013-09-20T20-04-00.000Z

Вы используете float: left, и поэтому вы обнаружите, что все миниатюры выровнены влево. Если вы хотите центрировать выравнивание этих элементов в своем div, попробуйте следующее:

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

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

}

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