728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
/*
요소의 정렬 방법들...
*Flexbox를 사용하여 정렬 (전부 가능)*
- 부모 요소에 justify-content: center
- 부모 요소에 align-items: center
====> 정 중앙 정렬
인라인 요소의 정렬 방법(수평)
- 정렬 대상 요소의 부모 요소에 text-align: center를 지정
인라인 요소의 정렬 방법(수직)
1) 한줄일 때
- 정렬 대상 부모 요소에 padding-topm padding-bottom을 동일하게 적용
- padding 적용이 불가능할 경우, 정렬할 요소에 line-height, height값을 동일하게 적용해줌
- 여러 줄일떄는 line-height 비추천
2) 여러 줄일 때
- 정렬 대상 부모 요소에 padding-top, padding-bottom을 동일하게 적용
- vertical-align을 적용할 요소에 middle로 지정 (table에서 가능)
블럭 요소의 정렬 방법(수평)
- 정렬 대상 요소에 width값을 지정하고, margin-left, margin-right에 auto를 해준다.
블럭 요소의(여러개)의 정렬 방법(수평)
- 정렬 대상 요소에 display: inline-block 으로 변경 후 부모 요소에 text-align: center를 지정
블럭 요소의 정렬 방법(수직)
1) 부모 요소를 기준을 ㅗ절대 위치 지정(position지정 필수 > 자식: absolute 부모: static이 아니여야됨)
- 자식에게 top : 50%, margin-top : - (자신의 height 값 / 2)px; <- height가 존재할 경우
- 자식에게 top: 50%, transform: translateY(-50%);
블럭 요소의 정렬 방법(수평 수직)
1) 요소의 width, height 값 있을 경우에 가능
- 자식에게 top:50%, left:50%, transform: translate(-50%, -50%);
*/
div {
position: relative;
width: 200px;
height: 200px;
line-height: 10px;
box-sizing: border-box;
border: 1px solid black;
background-color: rgb(243, 233, 138);
text-align: center;
}
span{
background-color: darkcyan;
vertical-align: middle; /* 요소를 정렬할 기준이 있어야 함*/
}
div > div {
position: absolute;
background-color: cornflowerblue;
margin: 0 auto;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<link rel="stylesheet" href="../../A1/페이지/랜딩페이지.css">
</head>
<body>
<div>
<!-- 인라인요소 -->
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, atque corporis alias optio vel dicta omnis odio dolores quaerat earum nobis, accusamus autem. Quaerat ipsum numquam quisquam a dolores deleniti.</span>
</div>
<div>
<!-- 블럭요소 -->
<div>BOX</div>
<div>BOX</div>
</div>
</body>
</html>728x90
반응형