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
위와 같이 나오길 원하시는게 맞나요?
넵 맞습니다! 아직 공부하지 않은 부분이라 계속 실패했던것같네요.. 모르는 부분 찾아서 다시 코딩해봐야겠습니다 감사합니다
혹시 뭐 하나만 여쭤봐도 될까요?
display-flex와align-items:center 를 같이써야지만 중앙에 정렬되는 이유가 뭔가요?
원래 가운데 정렬하는 속성은 가로일 경우 justify-content:center, 세로 정렬을 할땐 align-item:center 입니다. 근데 저 부분은 flex-direction:column; 값을 줘서 기준축이 세로가 됩니다. 그래서 align-item:center를 주면 가로부분 가운데 정렬이 되는거에요.
이게 말로 설명하면 어려운데 한번 예시등을 보시면 쉽게 이해되실거에요.
https://studiomeal.com/archives/197 여기 참고해 보시면 아주 좋습니다.
감사합니다!!!!! 열심히 공부하겠습니다!!
