1

リンク画像は商品ボックスの中央に配置されません。text-align：centerとdisplay：block and margin：0 autoを追加しようとしましたが、中央に配置されません！奇妙な理由で、descriptionクラスは機能しますが、centerクラスは機能しません。

誰かが私に何が悪いのか手がかりを与えることができますか？

HTML：

1 <div id="container_product_photos">
2 
3 
4 <% @product_photos.each do |photo| %>
5   <div class="product_box" >
6     <%= link_to image_tag(photo.image.url(:small)), product_photo_path(photo), class: 'center' %>
7     <p class='description'><%= photo.name %> </p>
8   </div> 
9 <% end %>
10     
11 </div>

部分的なCSSファイル：

5 #container_product_photos{
6   margin: 0 auto; 
7   width: 650px;
8   overflow:hidden;
9   .product_box { 
10     height: 200px;
11     width: 180px;
12     float:left;
13     
14     .center {
15       margin: 0 auto;
16 
17     }
18     
19     .description {
20         width: 70px;
21         margin: 0 auto; 
22      }
23   }
24 }
4

1 に答える 1

4

margin:0 auto.center クラスはset b/c では何もしません。HTML リンク タグ ( <a></a>) はブロック要素ではありません。あなたはこれを行うことができます：

.center {
    display:block;
    width:???px;
    margin: 0 auto;
}

交換 ？？？あなたのイメージの幅で。

于 2012-04-30T03:55:24.330 に答える