Выравнивание изображений + текст внутри div

У меня возникла проблема с этими ящиками. Дело в том, что мне нужно, чтобы текст выравнивался всегда посередине окна + изображение независимо от того, сколько строк оно имеет. Посмотрите на пример сильфона, большое спасибо:Выравнивание изображений + текст внутри div

HTML (я использую 960 сетки)

<div class="grid_4 prod-box-small alpha"> 
     <h5>Shampoos</h5> 
     <div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div> 
    </div>

CSS

.prod-box-small { 
    border:1px solid #e4e4e4; 
    min-height:115px; 
    padding-right:12px; 
    padding-left:20px; 
    margin-bottom:20px 
} 
.prod-box-small h5 { 
    color:#820c8e; 
    float:left; 
    font-weight:600; 
    max-width:100px; 
    padding-top:42px; 
    padding-bottom:22px 
} 
.prod-img-box-small { 
    width:100%; 
    display: block; 
    padding:0; 
    max-height:105px; 
    margin-right: 0; 
    text-align: right; 
    line-height: 115px; 
} 
.prod-img-box-small img { 
    max-width:100%; 
    max-height:100%; 
    vertical-align: middle 
}

источник

2013-12-05 Tiago

Пожалуйста, разместите свою HTML-структуру! –

Вопрос обновлен;) – Tiago

не конструктивен, чтобы рассказать, что он выглядит хорошо для вас ... не ваше решение вообще @L_Holcombe –

Форматирование h5 использованием display:inline-block, так vertical-align может работать на него, и дать ему ширину - как это: http://jsfiddle.net/Cds5q/

(h5 и img элементы написаны без пробелов между тегами здесь, иначе вы получите ширину пробельного символа между ними, а затем они не будут точно вписываться в элемент div.)

источник

2013-12-05 15:27:14 CBroe

Я сейчас тестирую его благодаря большому количеству – Tiago

Это работает просто отлично. Большое спасибо!! – Tiago

раздели до важных частей кода: http://jsfiddle.net/aETC4/

Вы можете использовать display: table для этого. С vertical-align: middle ваш заголовок будет располагаться по центру внутри воображаемой клетки

источник

2013-12-05 15:25:06

Я тестирую его сейчас спасибо – Tiago

Простейший способ использования поля margin-left: и margin right в процентах. вы можете проверить процентное значение с помощью инструмента отладчика.

источник

2017-05-11 08:28:48

Выравнивание изображений + текст внутри div

ответ

Смежные вопросы