[CSS 스타일 샘플] 상하 중앙 정렬

카테고리 없음 2020. 1. 20. 09:01

오늘은 상하 중앙 정렬 문제 하나 드려봅니다.

저도 할 때 마다 잊어서 정리해 두고 필요할 대마다 찾아볼 생각으로 올리는거예요 ^^;

 

정렬은 2가지 형태가 있습니다.

좌 우 정렬. 이건 가운데 정렬이라 하고, center로 쓰지요.

 

text-align : center;

 

가장 많이 쓰는 스타일 중 하나이기도 합니다.

 

중앙 정렬은 영문으로는 있는데 한국어로는 이거다 하고 정해놓은 용어가 없는 것 같아요.

중앙인데 가운데라고 쓰기도 하고...

 

영문으로는 vertical-align이라는 스타일이 있고, 이 스타일의 중앙 값을 middle로 씁니다.

text-align은 좌우의 가운데(center)지만 vertical-align은 상하의 가운데(middle)를 뜻해요.

 

좌우 가운데, 상하 가운데 하면 헷갈리니까, 저는 좌우는 가운데 정렬로, 상하는 중앙 정렬로 쓸게요.

앞에 좌우, 상하 없이 가운데 하면 좌우, 중앙 하면 상하 정렬입니다. 

 

그런데 vertical-align은 적용이 잘 안될거예요.

예를 들어 이런거.

 

장 제목을 표현하려면 상하 중앙 정렬이 필요합니다.

EPUB에서는 이렇게 보입니다.



눈에 확 들어오도록 세로 길이를 크게 늘려봤어요.

이러면 중앙정렬이 어떤건지 딱 보이지요?

 

중앙 정렬은 생각보다 까다로와요.

vertical-align이 아무때나 쓸 수 없기 때문이지요.

vertical-align은 inline 속성에서만 쓸 수 있습니다.

그래서 box나 block 속성에서는 적용이 안되지요.

 

가장 쉬운건

display : table-cell;

vertical-align : middle;

속성을 줘서 inline화 시키는거예요.

하지만 인라인 속성화 시키면 display:block; 속성을 써서 줄바꿈을 못합니다. 

 

저는 주로 중앙정렬 할 때 box-orient를 썼어요.

display: box;

box-orient: horizontal;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-align: center;

근데 이렇게 하면 table-cell처럼 상자 안쪽에도 영향을 줘서 display : block; 이 적용되지 않아요.

 

 

물론, 줄바꿈을 블럭 태그로 나눠서 처리하면 되지요.

이러면 제목을 한 줄에 표현할 수 없다는 문제가 생기지만요.

 

이럴 때 flex를 쓸 수 있습니다.

display:flex;는 박스 모델에서 점전 비중이 높아지고 있어요.

box, talble, block 등의 속성들이 flex 하나로 모두 처리 가능해졌지요.

 

.title_sec {

height : 4em;

border-left : 2px solid #000000;

border-radius : 3em;

padding-left : 1em;

font-size : 1.2em;

 

  display: -webkit-flex;

  display: flex;

 

  -webkit-flex-direction: column;

  flex-direction: column;

 

  -webkit-justify-content: center;

  justify-content: center;

 

text-indent : 0;

margin-bottom : 3em;

 

box-sizing : border-box;

}

 

.title_sec .title_sec_No {

display : block;

}

 

<h3 class="title_sec"><span class="title_sec_No">첫 번째 기술: </span>다른 여성과 경쟁하지 마라</h3>

 

사실 

.title_sec .title_sec_No {

display : block;

}

이 스타일도 필요 없어요. 이미 flex가 적용됐기 때문에 block을 주지 않아도 줄바꿈이 됩니다.

table-cell에서 쓸 수 없던 text-align:center;도 쓸 수 있어요.

text-align을 쓰면 상하좌우 가운데 정렬이 되지요.

 

상자 안에서 상하 중앙 정렬을 해야할 때 유용한 스타일이니 꼭 기억해 두세요.

설정

트랙백

댓글