9. 중앙 정렬 -바닥부터 시작하는 CSS-

2017. 1. 7. 10:50 from COMPUTER/CSS


9. 중앙 정렬      -바닥부터 시작하는 CSS-

 

1. block 요소의 가로 중앙 정렬

margin: auto; 또는 margin: 0 auto;를 지정한다.

(좌우margin만 auto를 지정하면 된다.)

이때 전체 가로 길이보다 작게 width값을 꼭 준다.

예 9-1

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  5.         margin: auto;
  6.         width: 60%;
  7.         border: 3px solid #73AD21;
  8.         padding: 10px;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  14.     <h3>block요소의 가로 중앙 정렬</h3>
  15.     <div class="center">
  16.       <p>
  17.         <b>알림:</b>IE8에서 margin:auto;를 사용 시 !DOCTYPE 을 선언하지 않으면 적용되지 않는다.</p>
  18.     </div>
  20.   </body>
  21. </html>

 

 

2. Text의 가로 중앙 정렬

앞서 공부했듯이 text-align: center;를 지정한다.

예 9-2

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  5.         text-align: center;
  6.         border: 3px solid green;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  12.     <h2>Text의 가로 중앙 정렬</h2>
  14.     <div class="center">
  15.       <p>This text is centered.</p>
  16.     </div>
  18.   </body>
  19. </html>

 


3. Image의 가로 중앙 정렬

<img>태그는 inline요소이므로 외부에 wrap을 씌우고, wrap요소의 text-align 속성에 center값을 주어 중앙 정렬을 시킨다.

예 9-3a

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .wrap {
  5.         text-align: center;
  6.       }
  7.       img {
  8.         border: 1px solid;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  14.     <h3>Image의 가로 중앙 정렬: wrap을 사용</h3>
  15.     <div class="wrap">
  16.       <img
  17.         alt="black cat"
  18.         src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  19.     </div>
  20.   </body>
  21. </html>


<img>태그를 block요소로 바꾼 후 margin:auto;를 적용한다.

예 9-3b

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       img {
  5.         display: block;
  6.         margin: 0 auto;
  7.         border: 1px solid;
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  13.     <h3>Image의 가로 중앙 정렬 - margin:auto;를 사용</h3>
  14.     <img
  15.       alt="black cat"
  16.       src="http://cfs.tistory.com/custom/blog/246/2467441/skin/images/cat.image.jpg">
  18.   </body>
  19. </html>

 

4. padding을 이용한 세로 중앙 정렬

Text가 들어갈 block요소에 상하 padding을 지정해 text가 중앙에 출력되게 한다.

딱히 마음에 드는 방법은 아님.

예 9-4

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  5.         padding: 70px 0;
  6.         border: 3px solid green;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  12.     <h3>padding을 이용한 세로 중앙 정렬</h3>
  14.     <div class="center">
  15.       <p>To climb steep hills requires slow pace at first.</p>
  16.     </div>
  18.   </body>
  19. </html>


이 방법에 text-align:center;를 적용하면 가로 세로 중앙 정렬이 된다.

예 9-5

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  5.         padding: 70px 0;
  6.         border: 3px solid green;
  7.         text-align: center;
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  13.     <h3>가로 세로 중앙 정렬</h3>
  14.     <div class="center">
  15.       <p>A rolling stone gathers no moss.</p>
  16.     </div>
  18.   </body>
  19. </html>

 


5. line-height을 이용한 세로 중앙 정렬

block요소의 height값과 line-height값을 같게 하면 그 안에 있는 inline, inline-block요소는 세로 중앙 정렬이 된다.

예 9-6

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  5.         line-height: 200px;
  6.         height: 200px;
  7.         border: 3px solid green;
  8.         text-align: center;
  9.       }
  10.       /* 여러 줄의 text를 쓸 경우 아래 코드를 추가한다.*/
  11.       .center p {
  12.         line-height: 1.5;
  13.         display: inline-block;
  14.         vertical-align: middle;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  20.     <h3>line-height를 이용한 세로 중앙 정렬</h3>
  21.     <p>line-height 속성 값을 height 속성 값과 같게 주어 세로 중앙 정렬을 한다.</p>
  23.     <div class="center">
  24.       <p>Where there's a will, there's a way.</p>
  25.     </div>
  27.   </body>
  28. </html>

 

6. table-cell을 이용한 세로 중앙 정렬

block요소의 속성을 display: table-cell;로 변경한 뒤 vertical-align을 middle로 준다.

예 9-7

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .center {
  6.         width: 500px;
  7.         height: 200px;
  8.         display: table-cell;
  9.         border: 3px solid green;
  10.         vertical-align: middle;
  11.         text-align: center;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  17.     <h2>table-cell을 이용한 세로 중앙 정렬</h2>
  19.     <div class="center">There is no royal road to learning.
  20.       <div>There is no royal road to learning.</div>
  21.       <div>There is no royal road to learning.</div>
  22.       <p>There is no royal road to learning.</p>
  23.     </div>
  25.   </body>
  26. </html>


pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .wrap {
  5.         display: table;
  6.         margin: 0 auto;
  7.       }
  8.       .center {
  9.         width: 500px;
  10.         height: 200px;
  11.         display: table-cell;
  12.         border: 3px solid green;
  13.         vertical-align: middle;
  14.         text-align: center;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  20.     <h3>table-cell을 이용한 가로 세로 중앙 정렬</h3>
  21.     <div class="wrap">
  22.       <div class="center">There is no royal road to learning.
  23.         <div>There is no royal road to learning.</div>
  24.         <div>There is no royal road to learning.</div>
  25.         <p>There is no royal road to learning.</p>
  27.       </div>
  28.     </div>
  29.   </body>
  30. </html>


저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

10. table 관련 속성 -바닥부터 시작하는 CSS-  (0) 2017.01.09
8. font 관련 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.07
7. text에 관련된 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.05
6. margin, padding, border 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.30
5. position 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.24
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});