如何创建具有垂直居中对齐文本的行项目

Question

我在创建具有以下要求的行项目时遇到问题：

• 行项目包含：顶部/左侧对齐的图标、标题和可选副标题
• 文本应垂直居中对齐
• 容器的宽度是动态的

这是一个难题：

http://jsfiddle.net/6ug3314b/

问题：

如果不对某个东西的宽度进行艰苦的编码，我就无法弄清楚如何让这个CSS工作。请参阅上面的JS Fiddle链接。

在不知道容器宽度的情况下，我不知道如何将".liceontent"div从包装到下一行。

以下是迄今为止的CSS：

.lineItems {
    list-style: none;
    padding: 0;
}
.lineItems > li {
    border: 1px solid #eaeaea;
}
.lineItems .title {
    margin: 0;
}
.lineItems .licontent {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}
.lineItems .icon {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}
.lineItems .icon:after {
    content: 'ICON';
}

Answer 1

如果我理解正确，请直截了当。你只需要添加一个有效的基于%的宽度和@media查询来根据需要减少%，因为图像不是基于百分比的。

JSFIDDLE

.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
width:85%;
word-break: break-word;
}
@media screen and (max-width: 550px) {
    .lineItems .licontent {width:73%}
}

Answer 2

听起来像CSS table和table-cell可能是一个很好的解决方案。它支持未知宽度和垂直对齐。

并使用table-layout: fixed;+word-wrap: break-word;进行换行。

演示：http://jsfiddle.net/pn5pja7e/

.lineItems {
    list-style: none;
    padding: 0;
}
.lineItems > li {
    display: table;
    width: 100%;
    table-layout: fixed; /*NEW*/
    word-wrap: break-word; /*NEW*/
}
.lineItems .licontent {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    /* word-break: break-all; */
    border: 1px solid blue;
}
.lineItems .title {
    margin: 0;
}
.lineItems .icon {
    display: table-cell;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}
.lineItems .icon:after {
    content: 'ICON';
}