CSSの表示属性のパラメータ

Question

私はいくつかのサムネイルを含むコンテナボックスを持っています。私は以前、すべての親指のdivを作ったが、それは効率的ではなかった。私は今、すべてのdiff親指をタグに入れて、同じクラスに含めました。私はクラス属性で

：

.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」という名前を付けたり、divの「thumb-wrap」に画像をラップすると、画像上に「thumb-img」は必要ありません。

ただ、親の関係を使用する：あなたのHTMLクリーナーを維持します

.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); 

}

。

Answer 2

ごめんなさい。それは馬鹿だった。私は体内にtext-align: center;を持っていた。

Answer 3

の代わりに、それはリストを使用するためにはるかにセマンティックで親指を含むように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 */ 
}