我正在创建一个网上商店,我希望每个产品的名称都位于产品图片框的中间。我正在尝试使用'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;
}
起初,css中的vertical-align属性可能有点令人困惑,因为许多人(包括我自己在内)往往对它的实际含义有误解。
您可以通过阅读以下内容全面了解该物业:
http://www.impressivewebs.com/css-vertical-align/
简而言之,我的建议是display: table-cell;
要使垂直对齐正常工作,建议在具有需要垂直对齐的内容的元素上使用(上面的文章对此进行了解释)。这将需要将container元素设置为display: table;
。
表格单元是垂直对齐内容的最简单方法,尽管它可能并不总是适合您的布局,或者可能需要重新格式化,所以如果您不熟悉它,我建议您也仔细阅读。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句