Snippet 본문

썸네일 중앙 정렬형

등록
(등록일 : 2011/09/08    최종수정일 : 2013/03/08)
Type
PC
설명
. 썸네일 사이즈 유동 . 이미지 박스 상하, 좌우 중앙 정렬
미리보기
Html
<ul class="thumb_comm">
	<li class="fst">
		<div class="thumb_info">
			<div class="inner_thumb">
				<span class="thumb_gap"></span>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=159" width="130" height="95" class="img_thumb" alt="이미지대체 텍스트">
				</a>
			</div>
		</div>
		<div class="cont_info">
			<div class="f_l">
				<strong class="tit_subject"><a href="#none" class="link_tit">제목</a></strong>
				<span class="txt_desc"><a href="#none" class="link_txt">내용을 적어주세요~</a></span>
				<span class="txt_time">2013.01.01</span>
			</div>
		</div>
	</li>
	<li>
		<div class="thumb_info">
			<div class="inner_thumb">
				<span class="thumb_gap"></span>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=161" width="100" height="130" class="img_thumb" alt="이미지대체 텍스트">
				</a>
			</div>
		</div>
		<div class="cont_info">
			<div class="f_l">
				<strong class="tit_subject"><a href="#none" class="link_tit">제목</a></strong>
				<span class="txt_desc"><a href="#none" class="link_txt">내용을 적어주세요~</a></span>
				<span class="txt_time">2013.01.01</span>
			</div>
		</div>
	</li>
	<li>
		<div class="thumb_info">
			<div class="inner_thumb">
				<span class="thumb_gap"></span>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=160" width="130" height="81" class="img_thumb" alt="이미지대체 텍스트">
				</a>
			</div>
		</div>
		<div class="cont_info">
			<div class="f_l">
				<strong class="tit_subject"><a href="#none" class="link_tit">제목</a></strong>
				<span class="txt_desc"><a href="#none" class="link_txt">내용을 적어주세요~</a></span>
				<span class="txt_time">2013.01.01</span>
			</div>
		</div>
	</li>
	<li>
		<div class="thumb_info">
			<div class="inner_thumb">
				<span class="thumb_gap"></span>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=158" width="130" height="90" class="img_thumb" alt="이미지대체 텍스트">
				</a>
			</div>
		</div>
		<div class="cont_info">
			<div class="f_l">
				<strong class="tit_subject"><a href="#none" class="link_tit">제목</a></strong>
				<span class="txt_desc"><a href="#none" class="link_txt">내용을 적어주세요~</a></span>
				<span class="txt_time">2013.01.01</span>
			</div>
		</div>
	</li>
	<li>
		<div class="thumb_info">
			<div class="inner_thumb">
				<span class="thumb_gap"></span>
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=160" width="90" height="61" class="img_thumb" alt="이미지대체 텍스트">
				</a>
			</div>
		</div>
		<div class="cont_info">
			<div class="f_l">
				<strong class="tit_subject"><a href="#none" class="link_tit">제목</a></strong>
				<span class="txt_desc"><a href="#none" class="link_txt">내용을 적어주세요~</a></span>
				<span class="txt_time">2013.01.01</span>
			</div>
		</div>
	</li>
</ul>
CSS
.thumb_comm {overflow:hidden;width:100%;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.thumb_comm li {float:left;width:100%;padding:10px 0;border-top:1px solid #e9e9e9}
.thumb_comm .fst {border-top:0 none}
.thumb_comm .thumb_info {display:table;float:left;margin-right:10px}
.thumb_comm .inner_thumb {display:table-cell;width:130px;height:130px;border:1px solid #e9e9e9;font-size:0;line-height:0;text-align:center;vertical-align:middle}
.thumb_comm .link_thumb {font-size:0;vertical-align:middle}
.thumb_comm .img_thumb {vertical-align:middle}
  
.thumb_comm .cont_info {overflow:hidden;padding-top:2px}
.thumb_comm .tit_subject {display:block;font-size:15px;line-height:17px}
.thumb_comm .tit_subject .link_tit {font-size:13px;line-height:15px;color:#333}
.thumb_comm .txt_desc {display:block;margin-top:8px;font-size:12px;line-height:14px}
.thumb_comm .txt_desc .link_txt {font-size:12px;line-height:14px;color:#666}
.thumb_comm .txt_time {display:block;margin-top:10px;font-size:11px;line-height:13px;color:#aaa}

/* ie6, ie7 이미지 상하 중앙 정렬 hack 사용 */
.thumb_comm .thumb_gap {*display:inline-block;*height:100%;*vertical-align:middle}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기