[html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법

[html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법

 

퍼블리싱을 하다 보면 세로 가운데 정렬을 해야 할 경우가 생기기 마련입니다. 

 

그 div가 만약 고정된 세로 값을 가지고 있다면 비교적 간단하게 할 수 있지만... 만약 가변적인 세로 값을 가지고 있다면... 굉장히 귀찮아지죠. 하지만 이런 경우는 흔한 일이기도 해서 제가 가장 자주 쓰는 방법인 table-cell 속성을 이용해서 세로 중앙 정렬하는 방법을 소개해드리겠습니다. 

 

일단 제가 만들고자 하는 화면은 이와 같습니다.

 

고양이 이미지 옆에 다양한 길이의 텍스트를 담고 있는 div를 세로 중앙정렬 하기

 

테이블 형식을 이용하면 한번에 되겠지만 반응형으로 작업해야한다던가 뭔가 제약조건이 있어서 div로 작업해야만 할때 사용할 수 있는 방법입니다.

 

결론적으로 말하자면 세로정렬하고자 하는 div를 div로 한 번 감싸고

display: table-cell; vertical-align:middle; height:(부모 div의 높이 값);

스타일을 적용해주면 됩니다. 

 

참고를 위해 소스 올려 놓습니다.

 

---

 

HTML 

<div class="wrap">
	<div class="img_box">
		<img src="test-img.jpg">
		<div>이 블로그는 사실 제가 터득한 방법을 제 스스로 다시 한번 정리하기 위한 블로그이며 정보가 정확하지 않을 수도 있습니다. 그래도 누군가에게는 도움이 되었으면 좋겠네요.</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>옆에 있는 고양이는 제가 그린 고양이에요.</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>이렇게 글자수가 다양한 문장을 쓰다보면 가변적인 높이를 갖는 div를 갖게됩니다.</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>보통은 고정된 글자수나 높이를 가진 경우가 많지만 텍스트를 입력받아서 사용하는 경우엔 가변적인 높이를 갖게 될 수 밖에 없죠</div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>이제 더이상은 쓸 말이 없네요.. 이게 첫번째 글인데 생각보다 블로그로 정보를 올린다는건 훨씬 더 어려운 일이네요.. </div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>여태까지 다른분들이 올려놓은 글을 보기만 했었는데 공부도 할 겸 정리해서 올려보려고 합니다. </div>
	</div>
	<div class="img_box">
		<img src="test-img.jpg">
		<div>야옹이는 야옹</div>
	</div>
</div>

 

CSS

<style>
.wrap{
	width:80%;
	margin:100px auto;
	border-top: 1px solid #efefef;
	border-left: 1px solid #efefef;
	overflow:hidden;
}
.img_box{
	width: 25%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	border-bottom: 1px solid #efefef;
	border-right: 1px solid #efefef;
}
.img_box img{
	width:40%; float:left;
}
.img_box > div{
	width:50%; padding:0px 5%; display:table-cell; font-size:13px; vertical-align:middle; height:152px;
}
</style>

 

css의 경우 제일 마지막  .img_box > div  부분이 핵심입니다.

 

 display속성을 table-cell 로 해주고, vertical-align속성을 middle로 적용한 후 감싸주는 div의 높이값을 height에 넣어주면 됩니다.  

 

---

 

확인해보면 아래와 같이 자동으로 세로 가운데 정렬이 된 것을 볼 수 있습니다.

※ 참고로 위의 소스의 경우 글자수가 부모 div 높이 이상으로 늘어날 경우 깨지게 됩니다.

 

읽어주셔서 감사합니다.