안녕하세요~ 레미입니다.
이번에도 FLEX layout과 관련된 글을 데려왔습니다.
바로 본론으로 들어갈게요!
IE에서 수직 중앙 정렬이 안되는 경우가 있습니다. (하,, 또 IE가,,,)
이런 경우 해결 방안은
center 정렬이 될 자식의 부모 태그에 고정 높이가 있어야만 center 정렬이 됩니다.
min-height, max-height가 설정되어 있어도 전부 무시되며, height가 적용 된 경우에만 속성이 적용되어야 합니다.
사용예는 아래와 같아요.
.box-wrap {
display:-ms-flexbox;
display:flex;
justify-content:space-between;
align-items:center;
height:300px;
}
.box {
flex:0 0 calc(50% - 20px);
-ms-flex-preferred-size: calc(50% - 20px);
}
그러나, 어떤 경우엔 부모 태그가 유동적인 높이를 유지해야하는 경우가 있어요.
이런 경우 flex 대신 display:table 사용을 추천합니다.
단, 이 경우엔 부모 태그에 min-height라도 적용이 되어 있어야 합니다.
사용예는 아래와 같습니다.
.box-wrap {
display:table;
min-height:300px;
}
.box {
display:table-cell;
vertical-align:middle;
}
자식 태그에 display:table-cell와 vertical-align:middle을 적용하면 수직 중앙 정렬이 됩니다.
하지만, display:table의 경우 자식 요소가 일반 텍스트가 아닐 경우엔 정렬이 잘 안될 수도 있어요.
저와 같이 어려움에 겪는 분들에게 많은 도움이 되길 바라며 이만 물러나겠습니다.
뿅★
'DEV > CSS' 카테고리의 다른 글
| [Select]select tag 기본 스타일(화살표) 변경 방법 3가지.(+ IE pollyfill, 가상선택자 사용시 발생하는 이슈 해결 방법) (0) | 2020.12.26 |
|---|---|
| [Alignment] inline-block사용하여 여백없이 수평 정렬하기.+ flex 레이아웃 사용. (0) | 2020.12.24 |
| [Selector] nth-child 선택자 효율적으로 사용하기.(n번째 부터 n번째까지, n의 배수) (0) | 2020.09.18 |
| [Cross browsing] Firefox 브라우저에서 select focus 시 보더 생기는 현상. (0) | 2020.09.13 |
| [Cross browsing] flex basis 사용 시 IE 브라우저 잘 대응하기.(flex 너비 값 설정) (2) | 2020.09.08 |