찾다

 >  Q&A  >  본문

CSS: 크기가 다른 하위 요소가 있는 요소를 세로 중앙에 배치하려고 합니다.

안녕하세요 여러분, 지금까지 가지고 있던 사진입니다

행 3개와 열 3개로 구성된 그리드가 있습니다(각 열은 최소한의 내용입니다). 각 셀의 요소를 중앙에 배치합니다. 보기에는 좋지만 제목이 너무 커지면 스위치와 카테고리 사이의 공간이 너무 커집니다.

이제 div 컨테이너 내부에 중간 행을 만들고 flex를 사용해 보았지만 한 카테고리의 크기가 다른 카테고리보다 크기 때문에 요소가 중앙에 정렬되지 않습니다.

카테고리도 같은 크기로 만들어 보았지만 전체 구성 요소를 페이지 중앙에 배치하면 더 작은 카테고리의 공백으로 인해 오른쪽으로 너무 멀어지게 됩니다.

공간을 더 작게 만들면서 제목과 버튼 중앙에 스위치를 두는 방법에 대한 아이디어가 있나요?

코드는 다음과 같습니다.

HTML:

으아악

Scss 코드:

으아악

코드를 최대한 최소화하고 scss 위치 지정과 관련 없는 일부 항목을 제거했습니다.

P粉476046165P粉476046165294일 전376

모든 응답(1)나는 대답할 것이다

  • P粉450744515

    P粉4507445152024-02-27 09:03:03

    수정하기 전에 쓴 글인데... 클래스 이름이 다르다면 죄송합니다. 이것은 단지 템플릿일 뿐입니다.

    으아악 으아악

    도움이 되길 바랍니다. 좋은 하루 되세요.

    회신하다
    0
  • 취소회신하다