0

我正在创建一个网上商店，我希望每个产品的名称都位于产品图像框的中间。我正在尝试使用 'vertical-align:middle' 来完成此操作，但我的努力没有奏效我看过一些教程，但我似乎无法让它工作。

HTML/ERB

<% @products.each_slice(4) do |row| %>
<div class="row-fluid">
<% row.each do |product| %>
  <div class="span3">
    <div class="storeitem">
      <div class="rollover-info">
        <p><%= link_to product.name, product %></p>
      </div>
      <%= link_to image_tag(product.images.order(:placement).first.image.url(:medium)), product if product.images.present? %>
    </div>
  </div>
<% end %>
</div>
<% end %>

CSS

.storeitem {
 width: 210px;
 height: 210px;
 border: 1px solid #e4e4e4;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align: center;
 padding: 5px;
 z-index: 1
 }

.storeitem img {
width: 90%;
height: 90%;
z-index: 1;
}

.rollover-info {
background-color:rgba(255,255,255,0.8);
border-radius: 50%;
width: 210px;
height: 210px;
text-align: center;
z-index: 10;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: table;
}

.rollover-info p {
display: inline-block; 
vertical-align: middle; 
text-align: center; 
}
4

2 回答 2

2

css 中的 vertical-align 属性起初可能有点令人困惑，因为很多人（包括我自己）往往对它的实际含义有误解。

通过阅读以下内容，您可以全面了解该属性：

http://www.impressivewebs.com/css-vertical-align/

虽然简而言之，我对垂直对齐的建议是display: table-cell;在具有需要垂直对齐的内容的元素上使用（上面的文章对此进行了解释）。这将需要将容器元素设置为display: table;.

表格单元格是垂直对齐内容的最简单方法，尽管它可能并不总是适合您的布局，或者可能需要重新格式化，所以如果您不熟悉它，我建议您也阅读一下。

于 2013-10-19T02:01:50.453 回答
1

有两种方法，1. usingline-height和 2. using tables。两种方法的逻辑/应用/含义总结在这里： http: //phrogz.net/css/vertical-align/

如果产品描述不超过两行，您可以使用line-height概述的方法。否则，您将需要使用display: table和display: table-cell

于 2013-10-19T03:25:29.067 回答