Question

如何获得项目列表，并将文本（通常是多行）与文本左侧的图像中间对齐？我尝试了很多方法（行高，绝对位置等），但没有任何工作。这是我希望它看起来像的一个例子。

如果我可以和基金会合作，我也会使用它。

enter image description here

Answer 1

使用简单的HTML表格。 http://www.w3schools.com/html/html_tables.asp

希望这有帮助。

Answer 2

如果您的上下文中有可能，我建议您使用background-image为文本容器设置background-position: left图片，并添加padding-left以避免文字位于顶部图像。

Answer 3

赞this。

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>

CSS：

.item {
    width: 400px;
    height: 90px;
    vertical-align: middle;    
}

.item img {
    vertical-align: middle;    
    height: 60px;
}

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

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

或者您可以执行以下操作（如果每行的高度不固定，这甚至可以工作）：

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

jsFiddle

Answer 4

将display：table与display：table-cell一起使用，如jsfiddle所示。除非你没有矢量/ SVG格式，否则不要将背景图像用于图标，在你看来你可以从免费图标集中获取这些图标。

转到fontello.com或类似内容并在那里创建一个字体（就像我在我的示例中所示）并使用您创建的自定义字体。

<强> 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>

<强> CSS

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

如果您不喜欢使用display: table，请使用:before选择器添加“ghost元素”，该选择器与display: inline-block一起使用效果很好。在此css-tricks.com文章中了解有关垂直对齐的详情。

使用图像垂直对齐多行文本

4 个答案: