使多行文本與圖像垂直對齊

Question

如何獲得項目列表，並將文本（通常多行）對齊到圖像左側的圖像中間？ 我嘗試了許多方法（行高，絕對位置等），但沒有任何效果。 這是我想要的樣子的一個例子。

如果我可以對Foundation做些事情，那么我也正在使用它。

Answer 1

使用一個簡單的HTML表。 http://www.w3schools.com/html/html_tables.asp

希望這可以幫助。

Answer 2

如果在您的上下文中有可能，建議您將圖像設置為文本容器的background-image ，並設置background-position: left ，並background-position: left添加padding-left以避免文本位於圖像頂部。

Answer 3

這樣 。

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

如我的jsfiddle所示，將display：table和display：table-cell一起使用。 另外，請勿將背景圖片用於圖標，除非您沒有矢量/ 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文章上了解有關垂直對齊的更多信息。