Я создаю веб-магазин, и я хочу, чтобы имя каждого продукта было центрировано в середине окна изображения продукта. Я пытаюсь выполнить это, используя "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;
}
Свойство vertical-align в css может сначала немного запутываться, так как многие люди (включая меня) имеют неправильные представления о том, что это на самом деле.
Вы можете получить полное представление об этом свойстве:
http://www.impressivewebs.com/css-vertical-align/
Короче говоря, мой совет по обеспечению вертикального выравнивания для работы - использование display: table-cell;
на элементе, который имеет содержимое, которое должно быть выровнено по вертикали (приведенная выше статья объясняет это). Для этого потребуется, чтобы элемент контейнера был установлен для display: table;
,
Table-cell - это самый простой способ вертикального выравнивания контента, хотя он может не всегда вписываться в ваш макет или может потребовать некоторого переформатирования, поэтому я бы рекомендовал также прочитать об этом, если вы не знакомы с ним.
Существует два метода: 1. использование line-height
и 2. использование таблиц. Логика/приложение/последствия обоих методов приведены здесь: http://phrogz.net/css/vertical-align/
Если описания продуктов не переносятся на две строки, вы можете использовать описанный метод line-height
. В противном случае вам понадобится использовать display: table
и display: table-cell