1)display:flex;/ justify-content:center;/ align-items:center;
가운데 정렬하는 쉽고 간편한 방법이 있다.
<style>
div{
width:100px;
height:40px;
display:flex;
justify-content: center;;
align-items: center;;
}
div:nth-child(1){
background-color: blue;
text-align: center;
}
div:nth-child(2){
background-color: yellow;
}
img{
width:10px;
}
</style>아래와 같이 가로 세로 가운데 정렬이 잘 된다.
참고로 image 크기를 키우면 이미지가 다른 <div> 영역 위까지 뻗는다.
img{
width:50px;
}
2)text-align과 line-height
텍스트를 가운데 정렬할 수 있는 text-align, 줄 높이를 활용해 세로 가운데 정렬할 수 있는 line-height를 계속 사용해보고 싶었다.
<style>
div{
width:100px;
height:40px;
text-align: center;
line-height: 40px;
}
div:nth-child(1){
background-color: blue;
}
div:nth-child(2){
background-color: yellow;
}
img{
width:20px;
}
</style>두번째 <div>요소는 가로 세로 모두 가운데 정렬이 잘 되었다.
하지만 이미지 태그가 있는 첫 번째 <div> 요소의 경우 수직 가운데 정렬이 잘 되지 않는다.
심지어 <img> 태그의 사이즈를 키울 수록 '1'의 수직 가운데 정렬은 틀어진다. 가령 width:30px;로 증가 시켜보자
img{
width:30px;
}이미지와 함께 가운데 수평 정렬은 되었으나 line-height를 활용한 수직 가운데 정렬은 힘들다.
3)중간 결론
text-align은 해당 속성의 기능이 가운데 정렬로서 가운데 정렬에 문제가 없었으나 line-height는 본디 줄 높이를 설정하는 기능이다. 이미지 없이 텍스트만 있는 경우 줄 높이를 통한 가운데 수직 정렬이 가능했지만 이미지 태그와 같이 텍스트 외정보가 있게 되면 더 이상 line-height를 통한 세로 가운데 정렬은 힘들다.
4)블록 요소 적용 여부
물론 블록 요소가 있으면 블록 요소는 text-align 속성부터 적용이 되지 않는다. 아래 <div> 자식 요소를 추가해보았다.
<body>
<forM>
<div>1 <div style="background-color: green; height:10px; width:20px; position:absolute;"></div>
</div>
<div>2</div>
</forM>
</body>text-align, line-height 모두 적용 안 된다. 다행히 이미지 태그가 없어지자 '1' 텍스트는 가운데 정렬이 되었다.
즉 text-align는 인라인 요소만 가운데 정렬된다.
display:Flex;, justify-content 및 align-items 쓰니깐 바로 가운데 정렬 된다.
div{
width:100px;
height:40px;
text-align: center;
line-height: 40px;
display:flex;
justify-content: center;;
align-items: center;;
}
위 <img>태그가 <div> 요소 침범하는 것도 그렇고, 위에 사례도 그렇고 인라인 요소랑 블록 요소는 서로 신경 안 쓰나 보다
5)결론
정렬은 정렬 기능 속성을 직접적으로 써야 된다. 안 그러면 피곤해진다. flex 짱.
참고로 flex는 인라인 요소, 블록 요소 모두 주축을 기준으로 수평 정렬 시킨다.
6)참고 URL - line-height에 대해
CSS / line-height / 줄 높이 정하는 속성
개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한
www.codingfactory.net
글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 됩니다. 줄 높이는 60px인데 글자 크기는 40px이므로, 글자 위와 아래에 각각 10px의 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹치게 됩니다.
또한 해당 값 상속시 자식 요소의 줄 높이는 자식 요소의 글자 크기에 비례해서 높이가 조정된다.
부모 요소의 line-height 값이 1.5, 글자 크기가 30px, 자식 요소의 글자 크기가 20px인 경우
부모 요소의 줄 높이는 30의 1.5배인 45px
자식 요소의 줄 높이는 20의 1.5배인 30px
만약 부모 요소의 line-height 값이 150%라면
부모 요소의 줄 높이는 30의 150%인 45px
자식 요소의 줄 높이는 부모 요소의 값을 상속 받아 45px
따라서 부모 요소와 자식 요소 간 글자 크기의 차이가 크다면 숫자를 속성값으로 하는 것이 좋습니다.
'[HTML,CSS]' 카테고리의 다른 글
| [CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기) (0) | 2023.04.25 |
|---|---|
| [HTML,CSS] CSS 기본 단위(px, em, rem, % 등) 및 브라우저 영역viewpoint 기준 단위(vw,vh) (0) | 2023.04.20 |
| [CSS] SCSS와 Bootstrap From GPT (0) | 2023.04.19 |
| [HTML] button과 input 태그 (0) | 2023.03.22 |
| [HTML] Style 및 Script 태그 (0) | 2023.03.22 |