如何在列表标记中对齐文本和图像

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>