inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

[응용 예제] 부모요소 자식요소 중첩해서 수직 수평 중앙 정렬

질문이 있습니다~

124

qbru

작성한 질문수 3

1

강의를 보며 연습 해보고 있는 학생입니다..

justify-content와 align-items center로 수평 수직 중앙에 배치 시켜놓았는데요. 근데 구현하고 싶은 것은 저 이미지들을  가운데에 중첩시켜놓고 싶은데 잘 되질 않네요.. 이미지들을 전부 가운데에 중첩시켜놓을려면 어떤식으로 될까요?

==========================================

HTML

   <!-- 중앙 레이아웃 전체 2 -->
        <div class="ct_layout">
            <!-- 중앙 레이아웃 타이틀 2-1 -->
            <div class="circle_screen">
                <div class="hud01"><img src="./img/circle.png"></div>
                <div class="hud02"><img src="./img/circle2.png"></div>
                <div class="hud03"><img src="./img/circle3.png"></div>
                <div class="hud04"><img src="./img/circle4.png"></div>
            </div>
        </div>

CSS

.ct_layout{
    border: 12px solid rgb(236, 39, 194);
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle_screen{
    border: 10px solid cyan;
    display: flex;
    justify-content: center;
    align-items: center;
}
[class*='hud'] {
    display: flex;
    justify-content: center;
    align-items: center;
}

flex 반응형-웹

답변 1

2

코딩웍스(Coding Works)

플렉스로 한곳에 자식요소를 모으는 속성은 없습니다.

.circle_screen에 position: relative 주시고 .circle_screen div 에 position: absolute 주시면 됩니다.

가로스크롤

1

458

1

상위 태그 영역 무시 하는 방법

1

842

2

반응형 적응형 구분

2

803

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

359

1

슬릭 슬라이더 버튼

1

370

1

slick 모바일로 변환했을때..

1

607

1

x scroll 이 왜 생기는 걸까요?

1

870

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

249

1

모바일에서 이미지 짤림 현상

1

2742

2

질문 있습니다

1

241

1

안녕하세요

1

259

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

289

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

387

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

407

2

slick slider 하는데 패딩이 안먹혀요

1

764

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

317

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

250

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

299

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

203

1

그 반응형 질문 있습니다

1

225

1

질문드립니다 강사님

1

288

2

flex 레이아웃 배치 질문있습니다.

1

220

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

201

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

972

1