Вертикальное выравнивание изображений в фиксированной высоте div - PullRequest
Новая
       20

Вертикальное выравнивание изображений в фиксированной высоте div

0 голосов
/ 31 января 2012

Я искал базу знаний высоко и низко, но, кажется, ничто не дает мне результата.

Я приложил скриншот и код содержимого, над которым я работаю, ниже, но мне нужно выровнять изображения по вертикали на основе высоты div, созданной самым высоким изображением.

Итак, несколько вещей. Фиксированная высота контейнера .one-edition определяется самым высоким размером изображения - могу ли я сделать это с JS?

Затем, как только высота определена, изображения выравниваются по центру по вертикали.

Надеюсь, это имеет смысл. 

    <div class="grid_3 one-edition">
<a href="product-1.php"><img src="images/editions/1_Right_To_Buy_295.jpg"></a>
        <div class="editions-info-text">
            <p>Right To Buy</p>
            <p>C-type Print</p>
        </div>  
    </div>
    <div class="grid_3 one-edition">
        <a href="product-1.php"><img src="images/editions/2_Scorer_295.jpg"></a>
        <div class="editions-info-text">
            <p>Hyperbolic Paraboloid Roof</p>
            <p>Offset Print</p>
        </div>  
    </div>
    <div class="grid_3 one-edition">
        <a href="product-1.php"><img src="images/editions/3_PL16_295.jpg"></a>
        <div class="editions-info-text">
            <p>132Kv PL16</p>
            <p>Offset Print</p>
        </div>  
    </div>
    <div class="grid_3 one-edition">
        <a href="product-1.php"><img src="images/editions/4_What_We_buy_295.jpg"></a>
        <div class="editions-info-text">
            <p>What We Buy</p>
            <p>Publication</p>
        </div>  
    </div>

enter image description here

1 Ответ

2 голосов
/ 31 января 2012

Я уже вижу много ответов, но я все еще публикую это, потому что я проводил время, используя плакитены ..

http://jsfiddle.net/7ybzp/6/

В основном я использовал vertical-align: middle. Я использовал inline-block хотя.

...