CODEWITHSUNDEEP
htmlcssimage
Eric Filkins
Eric Filkins

Reputation: 329

vertically aligning text with CSS

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

Upvotes: 0

Views: 174

Answers (2)

philip
philip

Reputation: 206

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

Upvotes: 1

Blake Mann
Blake Mann

Reputation: 5490

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.

Upvotes: 2

Related Questions