민서네집

[css] vertical align in div 본문

WEB (HTML, CSS)

[css] vertical align in div

브라이언7 2014. 6. 18. 15:40
http://cssdesign.kr/forum/viewtopic.php?id=153

Understanding vertical-align, or "How (Not) To Vertically Center Content"


< Vertical Centering in CSS >

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working

outer div 안에 inner div 가 있고, inner div를 outer div 안에 수직으로 가운데 정렬하기 위해서 여러가지 방법이 있다.

inner div 의 line-height 를 outer-div 의 height 만큼 지정해 줄 수도 있고, 

inner div 를 absolute position 을 준 다음에 top: 50% 로 지정해 줄 수도 있지만,

가장 쉬운 방법은 outer div 에서 display: table-cell 로 스타일을 주고, vertical-align: middle; 을 주는 방법이 아닐까 싶다.

outer div 에 float: left Style 속성이 있으면 vertical align 이 middle 로 되지 않는다. 

이런 경우는 float 속성이 있는 태그 안에 outer div 태그를 만들고, display: table-cell, vertical-align: middle; 속성을 줄것.

IE에서는 적용이 되지 않는데, 다음과 같이 해 볼것.

IE hack for display: table-cell

http://www.sweetsindesign.com/web/ie-hack-for-display-table-cell

<!doctype html>
<html lang="KR">
 <head>
  <meta charset="UTF-8">
  <title>Vertical Align</title>
 </head>
 <body>
	<div style="width:400px; height: 400px; background-color: yellow; vertical-align: middle; display: table-cell">
		<div style="background-color: green;">가운데 정렬</div>
	</div>
 </body>
</html>



<!doctype html>
<html lang="KR">
 <head>
  <meta charset="UTF-8">
  <title>Vertical Align</title>
 </head>
 <body>
	<div style="width:400px; height: 400px; background-color: yellow;">
		<div style="background-color: green; line-height: 400px;">가운데 정렬</div>
	</div>
 </body>
</html>


'WEB (HTML, CSS)' 카테고리의 다른 글

[css] box-sizing  (0) 2014.07.09
[css] calc  (0) 2014.07.09
HTML, CSS 디자인  (0) 2014.06.09
반응형 웹 강좌 - 6. 반응형 이미지  (0) 2014.05.22
Backbone.js 강좌  (0) 2014.05.10
공유하기 링크
'WEB (HTML, CSS)' Related Articles more
Comments