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

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

QA

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

본문


    
<!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 상자는 움직이지 않아요.. 

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

 

이 질문에 댓글 쓰기 :

답변 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

 

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

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

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

https://studiomeal.com/archives/197 여기 참고해 보시면 아주 좋습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT