Html 将多行文本与图像垂直对齐

如何获得项目列表，并将文本（通常是多行）与文本左侧图像的中间对齐？我尝试过许多方法（线高度、绝对位置等），但都不起作用。下面是一个我希望它看起来像什么的例子

如果我能在基金会上做点什么，我也会用这个。

使用简单的HTML表格。

---

希望这能有所帮助。

如果在您的上下文中可能，我建议将文本容器的图像设置为

背景图像，背景位置为
左
，并添加
填充左
，以避免文本位于图像顶部。
类似

HTML:

<div class="item"> 
    <span class="helper"></span>    
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRoQHBx4nEdsNbXh8aZ-RT1ID6yLFwZkLV6MwGlVcIXWf_YbzQF6w" />
    <div class="caption">
Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? I will break this, I will BREAK THIS. Damn druggie idiot. Is this what you've been doing the whole time I've been trying to reach you? 
    </div>
</div>

或者，您可以执行以下操作（即使每行的高度不固定，此操作也有效）：

将“显示：表格”与“显示：表格”单元格一起使用，如“我的电脑”中所示。
另外，除非没有矢量/SVG格式的图标，否则不要将背景图像用于图标，在您的情况下，看起来您可以从免费的图标集中获得这些图标

转到或类似选项，在那里创建字体（就像我在示例中所做的那样），并使用您创建的自定义字体

HTML

<ul>
    <li>
        <i class="icon-glass"></i>
        <p>This will be a day long remembered. It has seen the end of Kenobi, and will soon see the end of the rebellion.</p>
    </li>
    <li>
        <i class="icon-music"></i>
        <p>If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!</p>
    </li>
    <li>
        <i class="icon-search"></i>
        <p>Look, good against remotes is one thing, good against the living, that’s something else.</p>
    </li>
</ul>

如果您不喜欢使用
display:table
，请使用
：before
选择器添加一个“ghost元素”，该选择器可以与
显示：内联块一起工作。阅读本文中有关垂直对齐的更多信息。
这看起来像我需要的，但是如果文本比图像短，请查看：您可以为您的用例假设一个固定的高度吗？
.item {
    width: 400px;
    vertical-align: middle;   
    background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRoQHBx4nEdsNbXh8aZ-RT1ID6yLFwZkLV6MwGlVcIXWf_YbzQF6w);
    background-position: left center;
    background-size: 50px;
    background-repeat: no-repeat;
    overflow: auto;
    min-height: 50px;
}

.item div.caption {
    width: 340px;
    float: right;
}

<ul>
    <li>
        <i class="icon-glass"></i>
        <p>This will be a day long remembered. It has seen the end of Kenobi, and will soon see the end of the rebellion.</p>
    </li>
    <li>
        <i class="icon-music"></i>
        <p>If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!</p>
    </li>
    <li>
        <i class="icon-search"></i>
        <p>Look, good against remotes is one thing, good against the living, that’s something else.</p>
    </li>
</ul>

li {
    display: table;
    width: 50%;
    margin-top: 20px;
}
p {
    vertical-align: middle;
    display: table-cell;
}
i {
    vertical-align: middle;
    display: table-cell;
    width: 40px;
}