鏈接圖像CSS不會居中導軌3.2

鏈接圖像拒絕居中在產品框中。我嘗試添加文本對齊：中心和顯示：塊和邊距：0自動，但它不會居中！出於某種奇怪的原因，描述類可行，但中心類不行！鏈接圖像CSS不會居中導軌3.2

有人能告訴我什麼是錯的？

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 }

來源

2012-04-30 cj3kim

你的CSS格式不正確，你不能嵌套選擇器。 – Musa

@Musa，也許它更少或scss？ http://lesscss.org/ http://sass-lang.com/ –

+1的信息，從網站上的例子LESS實際上看起來像** more **。 – Musa

的.center類不會與margin:0 auto一套做什麼B/C的HTML鏈接標記（<a></a>）不是塊元件。你可以這樣做：

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

Replace ???與您的圖像的寬度。

來源

2012-04-30 03:55:24

謝謝！這工作。：]我用scss，順便說一句。 – cj3kim

鏈接圖像CSS不會居中導軌3.2

回答

相關問題