목차
CSS Layout - Horizontal & Vertical Align
- description : CSS Layout - Horizontal & Vertical Align
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-18
Source of the article
Center Align Elements
div와 같은 블럭 요소를 가로 방향으로 중앙 정렬 하기 위해, margin: auto; 를 사용합니다.
해당 요소의 너비를 설정하면 요소를 포함하고 있는 컨테이너의 가장자리까지 해당 요소가 펼쳐지지 않습니다.
그 후, 해당 요소는 지정된 너비만 차지하고, 남은 공간은 두 개의 마진 사이에서 균일하게 배분됩니다.
예제
.center { margin: auto; width: 60%; border: 3px solid #73ad21; padding: 10px; }
Note: width 속성을 설정하지 않거나 100%로 설정하면 중앙 정렬은 아무런 효과가 없습니다.
Center Align Text
요소 내부에 텍스트를 중앙 정렬하기 위해 text-align: center; 속성을 사용합니다.
예제
.center { text-align: center; border: 3px solid green; }
Note: 텍스트 정렬 방법에 대한 더 많은 예제는 CSS Text를 참조합니다.
Center an Image
이미지를 중앙 정렬하기 위해서 좌측 우측 마진을 auto 로 설정하고 block 요소로 만들어야 합니다.
img { display: block; margin-left: auto; margin-right: auto; }
Left and Right Align - Using position
요소들을 정렬하는 한 가지 방법은 position: absolute; 속성을 사용하는 것입니다.
예제
.right { position: absolute; right: 10px; width: 300px; border: 3px solid #73ad21; padding: 10px; } </cdoe> 절대 위치 요소(absolute positioned elements)는 일반적인 배치 흐름에서 제거되고 요소들과 겹칠 수 있습니다.\\ \\ \\ =====Left and Right Align - Using float===== 요소를 정렬하는 다른 방법은 ''float'' 속성을 사용하는 것입니다.\\ ====예제==== <code css>
Note: 한 요소가 자신을 포함하고 있는 요소보다 더 크고, float 속성이 적용된 경우, 요소를 포함하는 컨테이너 외부로 넘칠 수 있습니다. 이것을 해결하기 위해 “clearfix hack를 사용할 수 있습니다.(하기 예제 참조)
The clearfix Hack
하위 요소를 포함하는 상위 요소에 overflow: auto; 속성을 추가하여 해결합니다.
예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clearfix</title> <style> div { border: 3px solid #4caf50; padding: 5px; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; } </style> </head> <body> <h2>Clearfix</h2> <p> In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container: </p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" hight="170"> 이미지가 컨테이너보다 크고 floated되었기 때문에, 컨테이너 외부로 흘러넘친다(overflow) </div> <p style="clear:right"> 이 문제를 해결하기 위해서 이미지를 포함하고 있는 요소안에 ovrflow: auto; 속성을 가진 clearfix 클래스를 추가합니다. </p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> 이미지를 포함하고 있는 div에 clearfix 클래스를 추가하고 CSS에서 overflow: auto; 속성을 적용하였기 때문에 그림이 div안에 들어갑니다. </div> </body> </html>
Center Vertically - Using padding
CSS에서 요소를 수직 방향으로 중앙 정렬하는 많은 방법들이 있습니다. 상단과 하단에 pading 을 사용하는 것이 간단한 해결책입니다.
예제
.center { border: 3px solid green; padding: 70px 0; }
수직 방향, 수평 방향 모두 중앙 정렬하기 위해서 padding 속성과text-align: center 속성을 사용합니다.
예제
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Center Vertically - Using line-height
또 다른 방법은 height 속성과 동일한 값으로 line-height 속성을 사용하는 것입니다:
예제
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p { /* 여러 줄의 텍스트인 경우 이 내용을 삽입하세요*/ line-height: 1.5; display: inline-block; vertical-align: middle; border: 3px dotted crimson; }
Center Vertically - Using position & transform
padding과 line-height를 적용할 수 없는 경우, 다른 해결책은 positioning과 transform속성을 사용하는 것입니다.
예제
.center { height: 200px; position: relative; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
Center Vertically - Using Flexbox
중앙 정렬하기 위해 플렉스박스도 사용할 수 있습니다. 플레스박스는 IE10과 이전 버전에서는 지원하지 않음을 명심하세요
예제
.center { border: 2px solid green; justify-content: center; align-items: center; height: 200px; display: flex; }
