가운데 정렬

이현섭·2022년 4월 6일

TIL 빔캠프

📌 1. margin:auto;

margin의 초기값은 0이다.
남은 공간을 자동으로 여백으로 취하기위해 margin: auto;
블록요소에서만 사용가능!

📌 2. text-align: center;

자식요소의 모든 인라인요소들이 가로 중앙 정렬

📌 3. div 여러개 가운데 정렬

🔥 float: left를 이용!

이 방법을 이용하게 되면, 감싸고 있는 부모요소의 넓이값을 계산해줘야하고, 만약 요소가 늘어나게 되면 .dot-wrapper의 width가 고정값이기 때문에 결과와 같이 가로로 배치되는것이 아닌 아래로 떨어지게 된다!
=> 동적으로 바꿔주기 쉽지 않다. 다른방법은?

🔥 display: inline-block; 이용

.dot 클래스에 display: inline-block; 을 적용하면 인라인속성을 가지게 된다. 즉, 텍스트로 취급이 되기때문에 .dot의 부모인 .dot-wrapper에 text-align: center; 를 주었을 때 반응하게 된다!
=> 요소가 늘어나도, 동적으로 가운데 정렬이 유지된다!

현재 공과 공 사이는 인라인속성을 지니고 있기 때문에, 엔터값이 들어가서 약간의 공간이 들어가있다. 해결책은? 네거티브 마진! margin: -4px;

🔥 line-height 이용

<div class="box">WOW</div>

body {
    background-color: #999;
    }

.box {
    background-color: white;
    width: 300px;
    height: 200px;
    margin: 50px auto;
    text-align: center;
    }

box안에 wow라는 텍스트를 적어줬다. margin: auto;를 통해 박스자체는 가로정렬 또한, text-align: center; 속성을 이용해 wow라는 텍스트는 가로중앙 정렬이 되었다! 세로로도 중앙정렬을 시켜주려면 어떻게 해야할까?
=> line-height 속성을 이용해보자

<div class="box">
    <span>WOW</span>
</div>

body {
    background-color: #999;
    }

.box {
    background-color: white;
    width: 300px;
    height: 200px;
    margin: 50px auto;
    text-align: center;
    }

span {
    background-color: orange;
    display: inline-block;
    /* 인라인 세계에서의 height를 주자! */
    line-height: 200px;
    /* 한 줄의 높이가 200px이다! */
}

CSS는 한줄의 높이를 키우면 위,아래 공간이 동시에 늘어난다.
따라서 텍스트는 자연스럽게 중앙에 위치하게 된다! 하지만 정확한 가운데 정렬은 아니다!

출처: 생활코딩

여기서 span 요소가 하나 더 늘어난다면..? line-height 즉 줄 간격을 200px로 주었긴 때문에 망하게 된다..

요즘 반응형 웹에는 잘 맞지 않는 방법이기 때문에 잘 사용하지 않는다!

🔥 height값을 주지않고! padding을 주자!

box 안에 상,하로 padding값을 주게되면 이처럼 요소가 늘어난다고 해도 반응형으로 중앙 정렬이 가능하다! (행복^^)

🔥 line-height 을 이용해 이미지 가로, 세로 중앙 정렬하기!

이미지는 인라인 속성을 가지고 있기 때문에 위에서 언급한 line-height를 높이값으로 주게 된다면 가로, 세로 중앙 정렬이 가능하다!

<div class="box">
    <img src="/images/hamburger.jpg" width="200px" alt="햄버거">wow!
</div>

body {
    background-color: #999;
    }

.box {
    background-color: white;
    width: 500px;
    height: 500px;
    margin: 50px auto;
    text-align: center;
    line-height: 500px;
}

하지만! 텍스트는 중간이지만 이미지는 베이스라인 기준점으로 배치되어있기 때문에 중간이라고 볼 수 없다!
=> vertical-align: middle; 을 이용하자!

🔥 vertical-align: middle;

.box img {
    vertical-align: middle;
}

이미지는 line-height 기준에서 세로 가운데 정렬, text는 이미지에 상대적으로 중간에 위치하게 된다!

참고 영상 : 빔캠프 텍스트요소 정렬

📌 4. position: absolute;

left: 50%;, top: 50%; 는 center의 부모인 body의 너비 기준에서 50% 이동하는 것이지만 transform에 해당하는 모든 %의 기준점은 자기 자신의 너비, 높이 기준이다!

position: absolute; 의 특징에 대해서 한번 알아보자!
div는 블록요소다. 블록요소는 width값이 주어지더라도 가용공간 자체는 너비를 꽉 채우게 된다.

<!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>Document</title>
    <style>
        .one {
            background-color: dodgerblue;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="one">안녕하세요</div>
</body>
</html>

파란색 박스는 div의 너비값 이지만 검은색 박스처럼 div는 가용공간이 남는다.
하지만 여기에서 div에 position: absolute; 속성을 주게된다면?

.one {
    background-color: dodgerblue;
    width: 300px;
    position: absolute;
    margin: 0 auto;
}

겉보기에는 똑같지만 위와 달리 가용공간 자체가 width 값 만큼 줄어들게 된다! 따라서 margin: auto; 을 주어도 가운데 정렬이 되지 않는것이다!

이 상황에서 left:0; 과 right:0; 을 동시에 주게 된다면 가용공간이 전체로 늘어나게 된다!
마찬가지로 top:0;, bottom:0;을 동시에 주면 가용공간이 꽉 차게 된다! 이처럼 공간이 생겨나게 되면 margin: auto; 속성을 주었을때 가로 세로 중앙 정렬이 되는것이다! 코드로 한번 확인해보자!

참고영상 : 빔캠프 가운데정렬

📌 5. Table 속성을 활용한 가운데 정렬

테이블은 일반 블록요소와 다르게 컨텐츠의 양 만큼만 너비를 잡게 된다!
테이블은 부모요소의 높이가 달라져도 자식도 높이가 같이 달라진다!
이러한 테이블만의 속성들을 이용해 가운데 정렬이 가능하다!
cover 박스와 cover-inner 박스는 단순히 레이아웃만을 위하여 작성하였기 때문에 html이 지저분해진다는 단점이 있지만, IE8버전 까지 지원하기 때문에 호환성에서는 충분한 장점이 있다!