链接图像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

回答

相关问题