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

【问题标题】：vertical-align and elements with dynamic content and height垂直对齐和具有动态内容和高度的元素
【发布时间】：2015-02-10 22:09:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css vertical-alignment

【解决方案1】：

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

尝试添加：

.box {
    display: table;
}

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

现在 vertical-align: middle 可以处理这些了！请注意，在某些情况下，您不希望直接在父级或子级上显示表格。您可以添加一个包装器 div，其中包含您想要垂直布局的内容的属性。

可能需要将文本再次放入表格行内的表格单元格显示包装器中。我不确定那个自动取款机。

参考以下帖子： Vertical alignment of elements in a div

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：