[css] 수직, 수평 가운데 정렬

14063 단어 정렬CSSCSS

## 가운데정렬

요소들을 가운데로 정렬하는 다양한 방법에 대해서 알아보자.


  • 예제 html
<!DOCTYPE html>
<html>
  <head>
    <title>center</title>
  </head>
  <body>
    <h3>margin: auto</h3>
    <div class="box box1">
      <div id="inner inner1"></div>
    </div>
    <h3>text-align: center</h3>
    <div class="box box2">
      <button>인라인 버튼</button>
    </div>
    <h3>translate(50%, 50%)</h3>
    <div class="box box3">
      <div id="inner inner3"></div>
    </div>
    <h3>Text centering</h3>
    <div class="box box4">
      <ht>Text</ht>
    </div>
  </body>
</html>

margin: auto (블록레벨 요소 가운데 정렬)

블록레벨인 박스는 왼쪽으로 정렬되어 한 줄을 차지한다. 오른쪽 여백은 브라우저에서 자동으로 margin 이 된다.

이 때 margin: auto 속성을 주게 되면 브라우저에서 margin 응 양 옆으로 골구로 분배를 해주어 가운데 정렬이 된다.

(수평 정렬만 가능하다. 수직정렬x)

.inner1 {
  margin: auto
}

text-align: center (인라인레벨 요소 가운데 정렬)

부모요소인 박스 모델에text-align: center 속성을 주면 자식요소중에 인라인 레벨 요소라면 가운데 정렬이 된다.

(단 블록레벨 자식 요소는 가운데 정렬이 되지 않는다.)

(수평 정렬만 가능하다. 수직정렬x)

.box2 {
  text-align: center;
}

absolute + translate(50%, 50%) (블록/인라인레벨 요소 가운데 정렬)

position: absolute 속성을 주어 부모 요소를 기준으로 이동할 준비를 한다.

top: 50%, left: 50% 속성을 주어 부모 요소의 사이즈를 기준으로 50%씩 이동한다. 이 때 요소의 왼쪽 위 꼭지점이 기준이 되기 요소의 정가운데를 기준으로 조정을 해주어야한다.

translate(가로이동, 세로이동) 을 활용하여 요소를 정가운데로 조정한다. 이 때 값을 퍼센트로 주게되면 자기 자신의 사이즈의 50%로 계산이된다.

.inner3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

요소의 왼쪽 위 꼭지점이 부모요소의 가운데이기 때문에 자기자신의 사이즈 절반만큼 위로, 왼쪽으로 이동하면 정가운데로 위치하게 된다.


Text centering (글자 가운데 정렬)

text-align: center 속성을 이용해서 글자를 수평으로 가운데 정렬한다.

수직정렬은 올바른 방식은 아니지만 텍스트의 높이를 부모요소와 같게 하면 글자가 가운데로 보이게 되도록 해서 설정할 수 있다.

line-height: 100px 속성을 이용해서 글자의 높이를 부모요소와 똑같이 하여 마치 부모요소의 가운데로 이동한것처럼 보이게 할 수 있다. 단 한줄인 글자에서만 사용해야한다. 다음줄로 넘어가게되면 부모요소의 높이 만큼 다음줄로 개행이 되기 때문에 부모를 벗어나게 되기 때문이다.

.box4 h1 {
  text-align: center; // 글자 수평 정렬
  line-height: 100px; // 글자 수직 정렬, 사이즈는 부모요소의 크기로 주면된다.
}

flexbox

justify-content 속성

플렉스 요소의 수평 방향 정렬 방식을 설정한다.

box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

box {
  display: flex;
  flex-direction: row;
  justyfy-content: center;
}

box {
  display: flex;
  flex-direction: row;
  justyfy-content: center;
  align-self: center
}

align-items 속성

플렉스 요소의 수직 방향 정렬 방식을 설정한다.

box {
  display: flex;
  flex-direction: row;
  align-items: center // 수직 센터 정렬
}

align-self

align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용된다.

이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있다.

.item:nth-child(2) { align-self: flex-start; align-self: flex-start; }
.item:nth-child(3) { align-self: flex-end; align-self: flex-end; }
.item:nth-child(4) { align-self: center; align-self: center; }
.item:nth-child(5) { align-self: baseline; align-self: baseline; }
[Django] 회원가입, 로그인 기능 (Instagram)
JS Array를 통한 c3 그래프

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage