오늘은 모든 요소를 중앙에 놓는 방법을 배워보겠다.
원본 그대로의 코드와 화면은 아래와 같다.
html code
<body>
<div class="absolute">
<img src="cloud.png" alt="cloud">
<h1>나의 사랑 앤!</h1>
<img src="cloud.png" alt="cloud">
<img src="ann.jpg" alt="anne">
</div>
</body>css code
div {
width:700px;
height:700px;
background-color: blue;
}
모든 요소를 가로로 넣기 위한 방법이다.
text-align: center
텍스트를 중앙으로 정렬한다.
body {
text-align: center;
}
margin: 0 auto 0 auto
h1 {
width: 35%;
margin:0 auto 0 auto;
}
parents 요소는 position:relative;
children 요소는 position:absolute;
그리고 배치!
h1 {
padding:100px;
}
body {
text-align: center;
}
div {
background-color: lightyellow;
position: relative;
}
.top-cloud {
position: absolute;
right:0;
}
.bottom-cloud {
position:absolute;
top:200px;
left:0;
}