垂直对齐以及具有动态内容和高度的元素

Question

我有一个固定大小的盒子，里面有两个元素，一个图像和一些文本。 两者的宽度和高度都是可变的，我正在尝试在图像下方的剩余空间内垂直对齐文本。

|-------- 184px --------|
   (text-align:center)

+-----------------------+   -     -
|       +-------+       |   |     |
|       |#######|       |   |     |
|       |#######|       |   |     | ?
|       |#######|       |   | 1   |
|       +-------+       |   | 6   |
| - - - - - - - - - - - |   | 8   -
|                       |   | p   |
|    Some vertically    |   | x   |
|   aligned text with   |   |     | *
|    variable length    |   |     |
|                       |   |     |
+-----------------------+   -     -

• line-height不能使用，因为文本最多可以包含三行
• vertically-align似乎只能在固定height
• JavaScript始终为img返回height:0 （无论如何，纯CSS解决方案还是首选）

HTML：

<div class="box boxed js-box">
    <img src="/images/box-icon1.png">
    <span class="text short js-box-text">
        Title
    </span>
    <span class="text long js-box-text">
        Detailled description when hovered
    </span>
</div>

样式：

.box {
    background: #FFF;
    cursor: default;
    height: 168px;
    margin-top: 30px;
    padding: 4px;
    text-align: center;
    width: 184px;
}

.box img {
    border: 0;
    display: block;
    margin: auto;
    margin-bottom: 24px;
    position: relative;
    top: 16px;
    width: 76px;
}

.box .text {
    bottom: 4px;
    font-size: 12px;
    position: relative;
}

.box .text.short {
    font-size: 16px;
    top: 8px;
}

.box .text.long {
    display: none;
    font-size: 14px;
}

Answer 1

最简单的方法是在父元素和子元素上使用显示类型table和table-cell / row：

尝试添加：

.box {
    display: table;
}

.box .text {
    display: table-row;
    vertical-align: middle;
}

现在，垂直对齐：中间效果就可以了！ 请注意，在某些情况下，您不想直接在父级或子级上显示表。 您可以只添加一个包装器div，其中包含那些您想要垂直布局的东西的属性。

可能有必要将文本再次放在表行中的表单元格显示的包装器中。 我不确定那个atm。

请参阅以下文章： div中元素的垂直对齐

Answer 2

为您的图像和文本创建单独的容器，然后尝试使用display: table; 并display: table-row; 在他们。

jsFiddle（使用更新的JavaScript）： http : //jsfiddle.net/yoa3Lgd6/1/

HTML：

<div class="box boxed js-box">
    <div class="image_box">
        <img src="/images/box-icon1.png" />
    </div>
    <div class="text_box"> 
        <span class="text short js-box-text">
            Title<br />
        </span>
         <span class="text long js-box-text">
            Detailled description when hovered
        </span>
    </div>
</div>

JavaScript（使用最新的jQuery ）：

$(function() {
    $('div.text_box').hover(function() {
        $(this).find('.short').hide();
        $(this).find('.long').show();
    }, function() {
        $(this).find('.short').show();
        $(this).find('.long').hide();
    });
});

对CSS所做的更改：

.box {
    display: table;
}
.box > div {
    display: table-row;
    vertical-align: middle;
}

Answer 3

我认为最好的方法（不使用JS）是为图像（以及它周围的包装纸）和用户display:table和display:table-cell的文本（及其包装纸）设置一个最大高度。 请参阅以下示例：

 .box { background: #FFF; cursor: default; height: 168px; margin-top: 30px; padding: 4px; width: 184px; } .box .img-wrap { height:100px; line-height:100px; text-align:center; background:#eee; } .box img { border: 0; width: 76px; max-height:100px; height:auto; vertical-align:middle; } .box .text { font-size: 12px; } .box .text-wrap { height:68px; display:table; background:#bbb; width:100%; } .box .text { display:table-cell; width:100%; vertical-align:middle; text-align:center; } .box .text.short { font-size: 16px; } .box .text.long { display: none; font-size: 14px; } 

 <div class="box boxed js-box"> <div class="img-wrap"><img src="/images/box-icon1.png"></div> <div class="text-wrap"> <div class="text short js-box-text"> Title </div> <div class="text long js-box-text"> Detailled description when hovered </div> </div> </div>