html 구조 질문이요!!
본문
이런 식으로 구조를 할려고 그러는데요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#form {
bottom: 1px solid black;
display: flex;
justify-content:center;
top :50%
}
.left {
border: 1px solid black;
float: left;
width: 450px;
height: 500px;
}
.right {
border: 1px solid black;
float: right;
width: 450px;
height: 500px;
}
</style>
</head>
<body>
<div id="form">
<div class="left">1</div>
<div class="right">2</div>
</div>
</body>
</html>
이게 위아래 정렬이 안되네요...
답변 4
left. right내에서 가운데 정렬을 flex 속성을 이용하여 하고 싶다면
left와 right에 직접 align-items: center; justify-content: center;display:flex; 속성을 넣어주셔야 합니다
align-items는 수직 가운데 정렬.justify-content는 수평 가운데 정렬입니다.
맨상위에 width:100%; margin:0 auto;
<style>
.form_wrap{display: flex; align-items: center; justify-content: center; height: 800px; border : solid 1px red;}
#form{border : solid 1px blue; display: flex; padding : 10px;}
#form .left{border : solid 1px green; width : 450px; height: 500px;}
#form .right{border : solid 1px orange; width : 450px; height: 500px;}
</style>
<body>
<div class="form_wrap">
<div id="form">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</body>
결과
