如何在列表標記中對齊文本和圖像

Question

我試過垂直對齊，顯示：表格單元格等等我能找到的所有東西，但我無法獲得文本對齊列表標記的底部。 。

你會怎麼做？

Answer 1

從圖像#port_wrap img刪除您的浮動風格，並添加<br>前<strong>

working example

Answer 2

請檢查該fiddle

#port_wrap { 
 
\t margin-top: 130px; 
 
\t margin-left: -400px; 
 
\t margin-bottom: 150px; 
 
\t width: 950px; 
 
\t height: 700px; 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t display: block; 
 
\t padding: 0; 
 
\t overflow: auto; 
 
} 
 
#port_wrap img { 
 
\t border-radius: 10px; 
 
display: inline-block; 
 
    vertical-align: top; 
 
\t margin-right: 20px; 
 
\t box-shadow: 2px 2px 7px #888; 
 
} 
 
#port_wrap ul { 
 
\t font-family: "돋움",Dotum,Helvetica,sans-serif; 
 
\t font-size: 16px; 
 
\t color: #555555; 
 
\t line-height: 20px; 
 
    list-style: none; 
 
} 
 
#port_wrap ul li { 
 
\t height: 120px; 
 
\t margin-bottom: 15px; 
 
} 
 
#port_wrap .text{ 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
}

<div id="port_wrap"> 
 
\t <ul> 
 
    <li><img src="https://dl.dropboxusercontent.com/u/142820969/eastasia.png" /><div class="text"><strong>동아시아문화도시 2014 광주; 아시아 무대 담당</strong><br /> 
 
    \t <span style="font-size: 13px">2014년 10월 | 광주문화예술회관</span></div></li> 
 
    </ul> 
 
</div>