css 기초적인 질문입니다. flex

Question

.fragment { display: flex; } .divtag { display: flex; align-items: center; height: 2.25rem; }

zero

zero를 정확히 수직 센터로 오게할려면 어떻게 하나요??? center을 해도 정확힌는 안오네요

킁킁탐정 · Accepted Answer

테스트 해보니 정상적으로 중간에 오는거 같습니다.https://codesandbox.io/s/sad-blackburn-1mfdt?file&#61;/index.html

76003674 · Answer

zero 텍스트가 가운데 오는 방법은 없나요

킁킁탐정 · Answer

가운데라는게 어떤 의미인지 명확하지 않습니다. Zero 글자 좌우에 여백을 주어 중앙 정렬을말씀하시는건지 Zero 자체를 별도로 빼서 화면 중앙 정렬을 원하시는건지 알 수가 없습니다.보통 중앙 정렬은 특별한 언급이 없으면 컨테이터 내에서의 중앙 정렬을 의미해서상하 정렬이 잘된것을 보고 정상이라고 판단하였습니다.

76003674 · Answer

늦었는데 zero가 increment보다 미세하게 밑에 있습니다. item들은 정렬이 됐는데 혹시 이 text의 높이도 맞출수 있을지 궁금합니다.

킁킁탐정 · Answer

보통은 line-height로 간격을 조정하기 때문에 이 관련이 필요없으면 line-height: 0으로 타이트하게 잡습니다.이렇게하면 미세하게 어긋난 부분이 맞춰질꺼 같습니다.https://codesandbox.io/s/small-cloud-nogq6?file&#61;/index.html

76003674 · Answer

확실히 아까보다 정교해졌네요. 늦은시간에 답변 감사합니다. 혹시 말씀 중에&#34;이 관련이 필요없으면&#34;라는 뜨싱 뭔지 알수있읅까요?

킁킁탐정 · Answer

줄과 줄사이의 간격 조절이 line-height입니다. 이를 눈으로 보시면 이해하기 쉬우실꺼 같습니다.https://codesandbox.io/s/small-cloud-nogq6?file&#61;/index.htmlline-height를 0으로 고쳐보시면 아예 겹치는것을 보실 수 있습니다. 이러한 간격이 필요 없는 경우를이야기한것입니다.추가로,모든 브라우저는 개별적으로 태그마다 고유의 디자인이 있습니다.예를들어 button은 padding이 상하좌우로 이미 존재합니다.그래서 zero가 좀 더 아래에 보이는 이유는 padding이 없어서 이기도 합니다.브라우저마다 디자인이 모두 다른데 이를 적절하게 동일하게 만들어주는 도구가 있습니다.https://necolas.github.io/normalize.css/이러한것들을 미리 이용하시는게 브라우저마다의 차별점을 그나마 줄이는 방법이니미리 알아두시는게 좋을꺼 같습니다.

76003674 · Answer

늦은 시간 킁킁탐정님 감사합니다. 올려주신 깃허브도 확인하겠습니다. 고맙습니다.,

css 기초적인 질문입니다. flex

8개의 답변

#flex 목록