CSS를 중앙 정렬은 생각보다 복잡합니다. 구글링 해봐도, 상황에 따라 중앙정렬의 방법이 매우 상이해 도대체 같은 주제에 대해 답안이 이렇게나 다른것에 놀라울 따름이네요. 하지만, 중앙정렬의 상황을 정리해보면 위와같은 가짓수로 패턴화가 되는 것을 알 수 있다. 각 상활별 CSS 중앙정렬 방법을 알아볼 것입니다.
①인라인 엘리먼트의 가로정렬
먼저 인라인 엘리먼트를 "인라인 엘리먼트 내의 텍스트 정렬"과 "인라인 엘리먼트 자체의 정렬"로 구분하지 않은 이유는, 인라인 엘리먼트의 경우 블록이 형성되지 않아 텍스트가 쓰여지는 만큼의 영역이 되기 때문에 인라인 엘리먼트 = 텍스트 로 간주했기 때문입니다.
1. 상위 블록 엘리먼트의 text-align:center(left,right)를 상속받기
text-align은 가로정렬을 담당하는 속성인데, 이는 다음과 같은 특성을 가집니다.
text-align
CSS.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; }
・내용이 든 <p> 같은 종결 블록 요소에만 적용된다.
・인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다.
・구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다.
・자식 요소에 상속된 text-align속성은 자식이 인라인 요소라 하더라도 적용된다.
이때 주목해야 할 것은, text-align은 인라인 엘리먼트에는 직접 적용할 수 없는 속성이지만, 블록에 text-align을 선언하면 자식요소에 상속이 되게 되고, 상속은 인라인・블록 할 것없이 모두 적용된다는 점입니다. 이러한 상속의 특성을 이용하여 인라인 엘리먼트의 가로정렬이 가능하게 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html> <html lang="en"> <head> <style> .container{ background-color:rgb(125, 163, 3); width:600px; heghtㅑ:600px; } .outer{ background-color:rgb(156, 198, 21); width:500px; height:500px; } .inner{ background-color:rgb(202, 244, 66); width:400px; height:400px; margin:auto; display: table-cell; vertical-align: middle; text-align: center; } .centered{ background-color:rgb(226, 255, 132); width:300px; height:300px; display: inline-block; width: 60%; } .target_p{ background-color:white; width:200px; height:200px; } .target_span{ background-color:white; } </style> </head> <body> <div class="container"> <div class="outer"> <div class="inner"> <div class="centered"> <p class="target_p"> target_p center text? </p> <span class="target_span"> target_span center text? </span> </div> </div> </div> </div> </body> </html> | cs |
. inner의 text-align: center;을 상속받아 .target_span의 텍스트(target_span center text?)가 중앙 정렬 된 것을 볼 수 있습니다.
②블록 엘리먼트 내의 텍스트 가로정렬
1.text-align
위에서 언급한 text-align를 사용하면 됩니다. inner의 text-align: center;을 상속받아 .target_p의 텍스트(target_p center text?)가 중앙 정렬 된 것을 볼 수 있습니다.(위의 예)
2.부트스트랩을 이용한 text-center
블록엘리먼트인 div의 클래스를 text-center로 설정하면, 그 하위레벨의 인라인엘리먼트들이 모두 중앙정렬 된다.
1 2 3 4 | <div class="text-center"> <button type="button" class="btn btn-primary" id="upload-image-button" disabled><i class="glyphicon glyphicon-film">Image analyze</i></button> <button type="button" class="btn btn-primary" id="upload-text-button" disabled><i class="glyphicon glyphicon-file">Text analyze</i></button> </div> | cs |
③블록 엘리먼트 자체의 가로정렬
1.float 속성
float 속성은 블록 엘리먼트를 가로로 움직이게 할 수 있습니다. right none left 를 가지며, 가로 중앙 정렬은 가지고 있지 않습니다. 블록 엘리먼트의 가로 중앙 정렬에 사용되는 것이 margin 입니다.
<!DOCTYPE html> <html lang="en"> <head> <style> .container{ background-color:rgb(125, 163, 3); width:600px; heghtㅑ:600px; } .outer{ background-color:rgb(156, 198, 21); width:500px; height:500px; } .inner{ background-color:rgb(202, 244, 66); width:400px; height:400px; margin:auto; display: table-cell; vertical-align: middle; text-align: center; float:right; } .centered{ background-color:rgb(226, 255, 132); width:300px; height:300px; display: inline-block; width: 60%; } .target_p{ background-color:white; width:200px; height:200px; } .target_span{ background-color:white; } </style> </head> <body> <div class="container"> <div class="outer"> <div class="inner"> <div class="centered"> <p class="target_p"> target_p center text? </p> <span class="target_span"> target_span center text? </span> </div> </div> </div> </div> </body> </html> | cs |
.inner 이 오른쪽으로 이동한 것을 관찰할 수 있습니다.
2.margin 속성
margin속성은 border을 기준으로 외부의 영역에 해당 됩니다. .inner의 외부에 .outer가 있으므로 .inner의 margin을 설정하면 .outer와의 위치를 조정할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <style> .container{ background-color:rgb(125, 163, 3); width:600px; heghtㅑ:600px; } .outer{ background-color:rgb(156, 198, 21); width:500px; height:500px; } .inner{ background-color:rgb(202, 244, 66); width:400px; height:400px; margin:auto; } .centered{ background-color:rgb(226, 255, 132); width:300px; height:300px; display: inline-block; width: 60%; } .target_p{ background-color:white; width:200px; height:200px; } .target_span{ background-color:white; } </style> </head> <body> <div class="container"> <div class="outer"> <div class="inner"> <div class="centered"> <p class="target_p"> target_p center text? </p> <span class="target_span"> target_span center text? </span> </div> </div> </div> </div> </body> </html> | cs |
.inner가 .outer의 중앙에 위치하게 된 것을 볼 수 있습니다.
④인라인 엘리먼트의 세로정렬
⑤블록 엘리먼트 내의 텍스트 세로정렬
⑥블록 엘리먼트 자체의 세로정렬
'Front-end > HTML,CSS Basic' 카테고리의 다른 글
| [CSS]css selector (0) | 2018.01.25 |
|---|---|
| [CSS]중앙정렬2 - 인라인엘리먼트와 블록엘리먼트의 세로 정렬 (0) | 2018.01.25 |
| [CSS] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) (0) | 2018.01.25 |
| [CSS]css 상속, css 적용 우선순위 (0) | 2018.01.25 |
| 당신은 모를 수도 있는 CSS의 7가지 단위(rem,vh,vw,vmin,vmax,ex,ch) (1) | 2018.01.25 |