[HTML5 / CSS3] DIV 수평, 수직중앙정렬

2014. 8. 19. 17:13 - Song's IT

container클래스는 DIV 중 Outer요소

block클래스는 DIV 중 Inner요소입니다.


1) 수평정렬


DIV내 DIV수평정렬 CSS_1

#container { width:200px; height:200px; background-color:#000000; }

#block { width:50px; height:50px; background-color:#ffffff; margin:0 auto; }


DIV내 DIV수평정렬 CSS_2

#container { width:200px; height:200px; background-color:#000000;  text-align:center; }

#block { width:50px; height:50px; background-color:#ffffff; display:inline-block; }



2) 수평 + 수직정렬


DIV내 DIV수평, 수직정렬 CSS

#container { width:300px;  height:300px;  background-color:#000000;

    text-align:center;  vertical-align:middle;  display:table-cell; }

#block { width:50px;  height:50px;  background-color:#ffffff; 

display:inline-block; }



'Development > HTML5 / CSS3' 카테고리의 다른 글

HTML5] Table내 Cell Text 정렬  (0) 2014.09.16
[HTML5 / CSS3] Block & Inline 요소  (0) 2014.08.19

다른 카테고리의 글 목록

Development/HTML5 / CSS3 카테고리의 포스트를 톺아봅니다