html - Css:图像始终以文本行为中心

Question

我有一张图片和旁边的几行文字。行数不是恒定的。可能有一行、两行或三行文本。案例:

如果只有一行文字:

图片居中显示

如果是两行文字:

要在两条线之间居中的图像

如果是三行:

要居中的图像可能到中间线

重要说明:我有一个非常重要的要求，文本的容器应该有指定的高度:

到目前为止，这是我的 CSS:

.icon-several-lines {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}

.info {
     display: inline-block;
     vertical-align: middle;
     height: 120px;
}

HTML:

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>

    </span>
</div>

fiddle :http://jsfiddle.net/2bNsC/726/

谢谢。

Answer 1

使用表格布局，因为这样可以轻松地垂直对齐内容。使用您当前的标记，您不需要做太多更改。

img { display: inline-block; vertical-align: middle; }
.info { display: inline-table; vertical-align: middle; height: 120px; }
.info > p { display: table-row; vertical-align: middle; }
.info > p > span { display: table-cell; vertical-align: middle; }

更新 fiddle :http://jsfiddle.net/abhitalks/2bNsC/727/

片段:

.icon-several-lines {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}
img { display: inline-block; vertical-align: middle; }
.info {
    display: inline-table;
    vertical-align: middle;
    height: 120px;
    border: 1px solid #ddd;
}
.info > p { display: table-row; vertical-align: middle;}
.info > p > span { display: table-cell; vertical-align: middle;}

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     
    </span>
</div>