Question

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

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

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

line-height无法使用，因为文字最多可包含三行
vertically-align似乎只适用于固定的height
JavaScript始终为height:0返回img（无论如何都应首选纯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

最简单的方法是在父元素和子元素上使用显示类型表和表格单元格/行：

尝试添加：

.box {
    display: table;
}

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

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

可能需要将文本再次放在表格单元格显示的包装器中，该包装器位于表格行内。我不确定那个atm。

参考以下帖子： Vertical alignment of elements in a 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>

vertical-align和具有动态内容和高度的元素

3 个答案: