垂直对齐CSS文本

我正在创建一个webstore，我希望每个产品的名称都位于产品图像框中间。我正在尝试使用'vertical-align：middle'来完成此操作，但是我的努力并未奏效我已经看过一些教程，但是我似乎无法使其工作。垂直对齐CSS文本

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; 
}

来源

2013-10-19 Eric Filkins

参见：http://stackoverflow.com/questions/19461521/how-to-center-text-horizontally-and-vertically/19461564#19461564 –