vscode 가운데정렬 오류 한번만 봐주세요
</p>
<p> </p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta http-equiv="X-UA-Compatible" content="IE=edge"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <style></p>
<p> * {margin:0; padding:0;}</p>
<p> </p>
<p> div.content div{ margin: 0 auto;}</p>
<p> </p>
<p> .box1 {background-color: red;</p>
<p> width:200px; height:50px;</p>
<p> line-height:50px;}</p>
<p> .box2 {background-color: orange;</p>
<p> width:25px; height:90px;}</p>
<p> .box3 {background-color: yellow;</p>
<p> width:145px; height:90px;}</p>
<p> .box4 {background-color: green;</p>
<p> width:30px ; height:45px;}</p>
<p> .box5 {background-color: blue;</p>
<p> width:30px; height:45px;}</p>
<p> .box6 {background-color: purple;</p>
<p> width:200px; height:50px;</p>
<p> line-height:50px;</p>
<p> clear: both;}</p>
<p> </p>
<p> .warpA {overflow: hidden;}</p>
<p> .wrapB {line-height: 90px;</p>
<p> float: left;</p>
<p> display:flex;}</p>
<p> .wrapC {line-height: 45px;</p>
<p> float: left;}</p>
<p> </style></p>
<p></head></p>
<p><body></p>
<p> <div class="content"></p>
<p> <div class="box1">1</div></p>
<p> <div class="wrapA"></p>
<p> <div class="wrapB"></p>
<p> <div class="box2">2</div></p>
<p> <div class="box3">3</div></p>
<p> </div></p>
<p> <div class="wrapC"></p>
<p> <div class="box4">4</div></p>
<p> <div class="box5">5</div></p>
<p> </div></p>
<p> </div></p>
<p> <div class="box6">6</div></p>
<p> </div></p>
<p></body></p>
<p></html></p>
<p>
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
위와 같이 나오길 원하시는게 맞나요?
답변에 대한 댓글 4개
display-flex와align-items:center 를 같이써야지만 중앙에 정렬되는 이유가 뭔가요?
이게 말로 설명하면 어려운데 한번 예시등을 보시면 쉽게 이해되실거에요.
https://studiomeal.com/archives/197 여기 참고해 보시면 아주 좋습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인