이미지너비높이가운데

by Park Mino

HTML

<div class="bannerType">
			<span class="thum"><span><img src="http://image.oliveyoung.co.kr/uploads/images/goods/400/10/0000/0011/A00000011707701ko.jpg" alt="브랜드 소개 배너" style="width:50px;height:50px;"></span></span>
			<dl>
				<dt>작은 이미지 가운데</dt>
				<dd>영화 <올 더 머니>응모이벤트응모이벤트응모이벤트</dd>
			</dl>			
		</div>
		<div class="bannerType">
			<span class="thum"><span><img src="http://image.oliveyoung.co.kr/uploads/images/goods/400/10/0000/0011/A00000011707701ko.jpg" alt="브랜드 소개 배너" style="width:200px;height:200px;"></span></span>
			<dl>
				<dt>넘치는 이미지 가운데</dt>
				<dd>영화 <올 더 머니>응모이벤트응모이벤트응모이벤트</dd>
			</dl>			
		</div>
		<div class="bannerType">
			<span class="thum"><span><img src="../../image/temp/brand_banner.png" alt="브랜드 소개 배너" style="width:150px;height:100px;"></span></span>
			<dl>
				<dt>너비 높이 맞는 이미지</dt>
				<dd>영화 <올 더 머니>응모이벤트응모이벤트응모이벤트</dd>
			</dl>			
		</div>

CSS

.bannerType{display:table;table-layout:fixed;width:100%;height:100px;}
		.bannerType .thum{display:table-cell;position:relative;overflow:hidden;width:150px;padding:100px 0 0 150px;}
		.bannerType .thum > span{position:absolute;top:0px;right:0;bottom:0;left:0;transform:translate(50%, 50%)}
		.bannerType .thum > span img{position:absolute;top:0px;left:0;transform:translate(-50%, -50%)}
		.bannerType dl{display:table-cell;vertical-align:middle;}
		.bannerType dl dt, .bannerType dl dd{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}