链接图像 CSS 不会居中 Rails 3.2答案

【问题标题】：Link Image CSS won't center Rails 3.2链接图像 CSS 不会居中 Rails 3.2
【发布时间】：2012-05-09 19:56:46
【问题描述】：

链接图片拒绝在产品框中居中。我尝试添加 text-align: center 和 display: block and margin: 0 auto 到但它不会居中！出于某种奇怪的原因，描述类有效，但中心类无效！

有人能帮我找出问题所在吗？

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 }

【问题讨论】：

您的 css 格式错误，您不能嵌套选择器。
@Musa，也许是更少或 scss ？ lesscss.org sass-lang.com
+1 获取信息，从网站上的示例来看，LESS 实际上看起来像 more。

标签： ruby-on-rails css center

【解决方案1】：

.center 类不会对 margin:0 auto 执行任何操作设置 b/c HTML 链接标记 (<a></a>) 不是块元素。你可以这样做：

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

替换？？？与您的图像的宽度。

【讨论】：