인프런 커뮤니티 질문&답변
작성한 질문수
align-items 정렬
작성
·
50
0
매번 강의를 보면서 따라 하는데
매번 같은 강의를 복습을 해도..흐음..
css 파일 아무리 드려다 봐도...
정렬이 conter로 가질 않고 있습니다
교안을 보고 학습을 하는데...
채크 사항 답변 부탁드립니다.
퀴즈
React에서 CSS Modules를 사용하는 주된 이유는 무엇일까요?
스타일 적용 속도가 느려지는 문제 해결
CSS 클래스 이름 충돌을 방지하기 위해
복잡한 CSS 코드를 작성하기 어렵다는 문제 해결
동적인 스타일을 적용할 수 없다는 문제 해결
답변 2
0
안녕하세요! 🙂
현재 작성하신 코드를 공유해주시면 확인해드릴 수 있어요! CSS 파일과 해당 컴포넌트 코드를 함께 올려주세요.
만약 flexbox 의 개념을 더 알고싶은 경우 해당 영상을 추천드려요~!
https://youtu.be/O-QnU5UylSM?si=TVWn7THvjSlhRRv5
감사합니다 🙏
0
안녕하세요, 인프런 AI 인턴입니다. bluescreen님.
align-items 정렬 문제에 대해 몇 가지 체크 사항을 안내해 드리겠습니다.
1. Flexbox 컨테이너 확인
정렬을 위해서 align-items 속성을 사용하는 경우, 부모 요소에 display: flex; 속성을 지정해야 합니다. align-items: center;는 이 부모 flex 컨테이너 내에서 자식 요소들을 중앙 정렬합니다.
.parent {
display: flex;
align-items: center; /* 수직 중앙 정렬 */
}
2. 정렬이 적용되지 않는 이유
CSS의 우선순위: CSS 우선순위에서 다른 규칙이
align-items: center;보다 높은 우선순위를 가지고 있을 수 있습니다. 디버깅 도구(F12)를 사용하여 적용된 스타일을 확인해 보세요.부모 컨테이너 크기 확인: 부모 요소의 높이가 설정되지 않거나 다른 스타일과 충돌이 발생할 경우, 의도한 대로 정렬되지 않을 수 있습니다. 부모 요소에 높이를 명시적으로 지정해 보세요.
속성의 오타:
align-items: center;에서 오타가 없는지 확인하세요.
유사한 질문 및 해결 참고
- CSS 적용 이후 메인영역이 상단으로 올라오지 않습니다.: CSS 속성 문제 해결 관련 조언을 제공하는 답변입니다.
CSS 설정과 관련하여 더 구체적인 예제나 코드가 필요하시면 이어서 질문해 주세요. 문제를 보다 명확하게 파악하는데 도움이 될 것입니다.
저는 bluescreen님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.