Javascript 垂直对齐元素，使其具有动态内容和高度

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

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

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

• 行高

  无法使用，因为文本最多可以有三行

• 垂直对齐

  似乎只适用于固定的

  高度

• 对于

  img

  ，JavaScript总是返回

  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>

---

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

尝试添加：

.box {
    display: table;
}

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

现在垂直对齐：中间的工作对那些！ 请注意，在某些情况下，您不希望直接在父级或子级上显示表。您可以只添加一个包装器div，其中包含要垂直布局的内容的属性

可能需要将文本再次放入表格行内的表格单元格中。我对自动取款机不太清楚

请参阅以下帖子：

---

为图像和文本创建单独的容器，并尝试使用

display:table和
显示：表格行在他们身上

JSFIDLE（使用更新的JavaScript）：

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>

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

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

对CSS所做的更改：

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

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

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

我认为最好的方法（没有JS）是为图像设置一个最大高度（可能还有一个包装），为文本及其包装设置用户
display:table
和
display:table cell
。请参见下面的示例：


.box{
背景：#FFF；
游标：默认值；
高度：168px；
边缘顶部：30px；
填充：4px；
宽度：184px；
}
.box.img包装{
高度：100px；
线高：100px；
文本对齐：居中；
背景：#eee；
}
.box img{
边界：0；
宽度：76px；
最大高度：100px；
高度：自动；
垂直对齐：中间对齐；
}
.box.text{
字体大小：12px；
}
.box.文本换行{
高度：68px；
显示：表格；
背景:#bbb ;；
宽度：100%；
}
.box.text{
显示：表格单元格；
宽度：100%；
垂直对齐：中间对齐；
文本对齐：居中；
}
.box.text.short{
字体大小：16px；
}
.box.text.long{
显示：无；
字体大小：14px；
}

标题
悬停时的详细说明