<li>中的css垂直对齐img和文本（多行）答案

【问题标题】：css vertical align img and text (multiline) in <li><li>中的css垂直对齐img和文本（多行）
【发布时间】：2014-09-12 19:14:49
【问题描述】：

我确实在这里查看了很多类似的问题，但没有人帮助我解决我的问题。我在垂直对齐 li 单元格左侧的 img 时遇到问题（这是有效的），但我无法对齐 img 旁边的文本。 ul li div 的 line-height 弄乱了我的东西。

这是Jsfiddle.

我不想实现的是：

在左侧 li 单元格的 1/3 处垂直和水平对齐 img。
在 li 单元格的 2/3 处垂直和水平对齐文本，文本对齐应向左。文本可以是多行的，并且在第一行带有粗体标题。

如有必要，您还可以编辑 html 代码。

HTML

<div class="product_banner_right">
    <div class="product_banner_right title">
        <h3>LOOK DOWN</h3>
    </div>
    <ul>
        <li>
            <img src="http://dummyimage.com/26x23/000/fff.png" alt="" />
            <p><span>HEADING1</span>first line text
                <br>second line text</p>
        </li>
        <li>
            <img src="http://dummyimage.com/48x9/000/fff.png" alt="" />
            <p><span>HEADING2</span>first line text</p>
        </li>
        <li>
            <img src="http://dummyimage.com/40x24/000/fff.png" alt="" />
            <p><span>HEADING3</span>first line</p>
        </li>
        <li>
            <img src="http://dummyimage.com/46x17/000/fff.png" alt="" />
            <p><span>HEADING4</span>first line text
                <br>second line text
                <br>third line text</p>
        </li>
    </ul>
</div>

CSS

.product_banner_right {
    font-size: 1.2em;
    position: relative;
    width: 250px;
}
.product_banner_right .title {
    height: 40px;
    background: #1b3a6f;
}
.product_banner_right .title h3 {
    text-align: center;
    line-height: 40px;
}
.product_banner_right ul {
    margin: 0;
    padding: 0;
}
.product_banner_right ul li {
    display: block;
    height: 70px;
    border: 1px solid black;
}
.product_banner_right ul li img {
    vertical-align: middle;
    padding: 0 10px;
    max-width: 50px;
}
.product_banner_right ul li p {
    vertical-align: middle;
    display: inline-block;
}
.product_banner_right ul li p span {
    font-weight: bold;
}

【问题讨论】：

标签： html line-breaks css

【解决方案1】：

将以下样式更改为：

.product_banner_right {
font-size: 100%;
position: relative;
width: 250px;
}

.product_banner_right ul li img {
vertical-align: middle;
padding: 0 4%;
width: 11%;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
width: 80%;
}

结果：

【讨论】：

【解决方案2】：

我已重写您的 html 以适应更改。我应用了两个选项：

可变高度列表项。
固定高度列表项溢出。

固定高度列表项

CLICK FOR DEMO

此选项与浏览器完全兼容，但需要手动调整每个列表项的上边距。或者，此选项仍可与下面描述的 box flex 模型一起使用。

修复列表项的高度并在溢出时添加滚动：

height:70px;
overflow:auto;

可变高度列表项

CLICK FOR DEMO

此选项依赖于 css3 flex box 模型：

display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;

请注意弹性框需要浏览器支持。它现在与现代浏览器高度兼容，但是旧版本的无用过时浏览器即不支持它。这些浏览器的用户仍将获得良好的观看体验，但图像将在每个列表框的顶部而不是中心对齐。

【讨论】：

把 -webkit- 前缀属性放在最前面，它们匹配的非前缀属性放在最后，以便在支持它的浏览器中使用非前缀选项。
感谢黑曜石。你的回答对我很有帮助。

【解决方案3】：

我不知道这是否是最好的方法，但它看起来已经比你的好一点。我只是更改了以下内容：

.product_banner_right ul li img {
    vertical-align: middle;
    padding: 0 10px;
    /* CHANGED*/
    width: 33%;
}

.product_banner_right ul li p {
    vertical-align: middle;
    display: inline-block;
    /* CHANGED*/
    width: 66%;
    position:absolute;
}

但您仍然必须让文本适合表格。

希望它有所帮助，干杯！

【讨论】：

【解决方案4】：

您可以在单独的类中制作文本，然后按照您的意愿使用

边距

【讨论】：