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

Question

我已经尝试了vertical-align，display：table-cell等我能找到的所有内容，但我无法在列表标记的底部找到文本对齐...

你会怎么做？

Answer 1

从图片#port_wrap img中移除您的浮动样式，并在<br>之前添加<strong>

working example

Answer 2

请检查 fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;