CSS атрибуты отображения параметров

Question

У меня есть контейнер с множеством миниатюр. Раньше я делала div из всех превью, но это было неэффективно. теперь я включаю все большие пальцы в теги и включаю их в один класс.

в атрибутах класса, которые у меня есть:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;
}

.thumb {
    padding: 4px;
}
.thumb-img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);
}

HTML это:

    <div class="thumb-wrap">
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>

        </div>

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

Answer 1

Вам также не нужен класс «thumb» для ссылки или «thumb-img» на изображениях, если вы заключаете их в div «thumb-wrap».

Просто используйте родительские отношения:

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;

}

 .thumb-wrap a {
    padding: 4px;

}

 .thumb-wrap img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);

}

Это сделает ваш HTML чище.

Answer 2

Вместо того, чтобы использовать div для хранения больших пальцев, гораздо более семантически использовать список:

<ul class="thumbs">
   <li><a href="#"><img src="img0-thumb0.jpg" /></a>
   <li><a href="#"><img src="img1-thumb1.jpg" /></a>
   <li><a href="#"><img src="img2-thumb2.jpg" /></a>
   <li><a href="#"><img src="img3-thumb3.jpg" /></a>
</ul>

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

ul.thumbs li a {
   /* anchor styles here */
}
ul.thumbs li a img {
   /* image styles here */
}

Answer 3

извините, ребята. это было глупо. у меня было text-align: center; в теле.