SIR
목록으로

vscode 가운데정렬 오류 한번만 봐주세요

은톨이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 3,403
답변 1
목록

Copy 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {margin:0; padding:0;}

 

        div.content div{ margin: 0 auto;}

 

        .box1 {background-color: red;

               width:200px; height:50px;

               line-height:50px;}

        .box2 {background-color: orange;

               width:25px; height:90px;}

        .box3 {background-color: yellow;

               width:145px; height:90px;}

        .box4 {background-color: green;

               width:30px ; height:45px;}

        .box5 {background-color: blue;

               width:30px; height:45px;}

        .box6 {background-color: purple;

               width:200px; height:50px;

               line-height:50px;

                clear: both;}

 

        .warpA {overflow: hidden;}

        .wrapB {line-height: 90px;

                float: left;

                display:flex;}

        .wrapC {line-height: 45px;

                float: left;}

    </style>

</head>

<body>

    <div class="content">

        <div class="box1">1</div>

        <div class="wrapA">

            <div class="wrapB">

                <div class="box2">2</div>

                <div class="box3">3</div>

            </div>

            <div class="wrapC">

                <div class="box4">4</div>

                <div class="box5">5</div>

            </div>

        </div>

        <div class="box6">6</div>

    </div>

</body>

</html>

 

1,2,3,4,5,6 상자가 모두 가운데로 이동해야 하는데 2,3,4,5 상자는 움직이지 않아요.. 

아무리 해봐도 모르겠어요.. 

 

#css #vscode #html

답변 1개

<style>

* {margin:0; padding:0;}

div.content{display:flex;align-items:center;flex-direction:column;}
.box1 {background-color: red;width:200px; height:50px;line-height:50px;}
.box2 {background-color: orange;width:25px; height:90px;}
.box3 {background-color: yellow;width:145px; height:90px;}
.box4 {background-color: green;width:30px ; height:45px;}
.box5 {background-color: blue;width:30px; height:45px;}
.box6 {background-color: purple;width:200px; height:50px;line-height:50px;clear: both;}

.wrapA {overflow: hidden;display:flex;}
.wrapB {line-height: 90px;display:flex;}
.wrapC {line-height: 45px;}

</style>

 

https://codepen.io/hs-feelz/pen/JjmjgZP

 

위와 같이 나오길 원하시는게 맞나요? 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

넵 맞습니다! 아직 공부하지 않은 부분이라 계속 실패했던것같네요.. 모르는 부분 찾아서 다시 코딩해봐야겠습니다 감사합니다
혹시 뭐 하나만 여쭤봐도 될까요?

display-flex와align-items:center 를 같이써야지만 중앙에 정렬되는 이유가 뭔가요?
원래 가운데 정렬하는 속성은 가로일 경우 justify-content:center, 세로 정렬을 할땐 align-item:center 입니다. 근데 저 부분은 flex-direction:column; 값을 줘서 기준축이 세로가 됩니다. 그래서 align-item:center를 주면 가로부분 가운데 정렬이 되는거에요.

이게 말로 설명하면 어려운데 한번 예시등을 보시면 쉽게 이해되실거에요.

https://studiomeal.com/archives/197 여기 참고해 보시면 아주 좋습니다.
감사합니다!!!!! 열심히 공부하겠습니다!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고