如何创建带有垂直居中对齐文本的订单项？

Question

我在创建符合以下要求的订单项时遇到问题：

订单项包含：top/left 对齐图标、标题和可选副标题
文本应垂直居中
容器的宽度是动态的

这是一个Fiddle:

http://jsfiddle.net/6ug3314b/

问题：

如果不对某些内容的宽度进行硬编码，我无法弄清楚如何让这个 CSS 工作。参见上面的 JS Fiddle link。

我不知道如何在不知道容器宽度的情况下将“.licontent”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

听起来像 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';
}

Answer 2

直截了当，如果我没理解错的话。您只需要添加一个有效的基于百分比的宽度和一个@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%}
}

如何创建带有垂直居中对齐文本的订单项？

How to create a Line Item with vertical middle aligned text?

html

css

vertical-alignment