css在<li> </li>中垂直对齐img和文本（多行）

Question

我确实在这里查看过类似问题，但没有人帮我解决问题。我有一个问题，在li单元格的左侧垂直对齐img（这是有效的），但我无法对齐img旁边的文本。来自ul li div的行高正在搞乱我的事情。

这是Jsfiddle.

我想要达到的目的是：

• 垂直和水平对齐img在左侧的li单元格的1/3处。
• 垂直和水平对齐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;
}

Answer 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%;
}

结果：

Answer 2

我重写了你的html以适应变化。 我已经应用了两个选项：

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

---

固定高度列表项

CLICK FOR DEMO

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

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

height:70px;
overflow:auto;

---

可变高度列表项

CLICK FOR DEMO

此选项依赖于css3弹性框模型：

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

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

Answer 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;
}

但你仍然需要让文字适合表格。

希望它有所帮助，干杯！

Answer 4

您可以在单独的课程中制作文本，然后根据需要进行排列

margin