使用CSS垂直对齐文本

Question

I'm creating a webstore and I want the name of each product to be centered in the middle of the product image box. I'm trying to accomplish this using 'vertical-align:middle' but my efforts haven't worked I've looked at a few tutorials, however I can't seem to get it working.

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

Answer 1

The vertical-align property in css can be a bit confusing at first, as many people (myself included) tend to have misconceptions about what it actually is.

You can gain a comprehensive understanding of the property by reading this:

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

Though in short, my advice for getting vertical alignment to work, is to use display: table-cell; on the element which has contents that need to be vertically aligned (the above article explains this). This will require the container element to be set to display: table; .

Table-cell is the easiest way to vertically-align content, though it may not always fit into your layout, or may take some reformatting, so I'd recommend reading up on that as well, if you are unfamiliar with it.

Answer 2

There are two methods, 1. using line-height and 2. using tables. The logic/application/implications of both methods are summarised here: http://phrogz.net/css/vertical-align/

If the product descriptions do not carry over two lines you can use the line-height method that is outlined. Otherwise you will need to use display: table and display: table-cell