1. block 요소 가운데 정렬하기
1) 좌우 margin을 auto로 설정해서 가운데 정렬하기
<!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></title>
<style>
.parents {
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.children {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="parents">
<div class="children"></div>
</div>
</body>
</html>
2) inline-box로 묶어서 align-text: center; 설정
<!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">
<style>
.wrapper {
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
color: white;
font-size: 3rem;
text-align: center;
line-height: 100px;
display: inline-block;
margin: 0 -3px;
}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</body>
</html>
3) position:
absolute를 줘서 left, right, top, bottom 값에 모두 0을 주고 margin값에 0을 줘서
가로 세로 가운데 정렬을 할 수 있다.이떄 width와 height 값은 고정된 값이어야 한다.
<!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></title>
<style>
body {
background-color: beige;
}
.center {
background-color: grey;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
width: 300px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="center">1</div>
</body>
</html>
4) 고정 값이 아닌 높이를 가진 요소 가운데 정렬:
<!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></title>
<style>
body {
margin: 0;
}
.cover {
background-color: pink;
width: 100%;
height: 100vh;
display: table;
}
.cover-inner {
background-color: plum;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box {
background-color: peru;
width: 400px;
margin: 0 auto;
padding: 2rem 0;
}
</style>
</head>
<body>
<div class="cover">
<div class="cover-inner">
<div class="box">정렬</div>
</div>
</div>
</body>
</html>
2. 인라인 요소 가운데정렬
1) 패딩을 줘서 가운데 정렬 이때 단위는 em으로 줘서 폰트나 width 값이 변경되어도 반응할 수 있게 만든다. 이때 height값은 auto로 해야 한다.
<!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></title>
<style>
body {
background-color: beige;
}
.box {
background-color: white;
width: 300px;
margin: 0 auto;
text-align: center;
/* padding: 30px 0; */
font-size: 20px;
padding: 2em 0;
}
span {
background-color: pink;
}
</style>
</head>
<body>
<div class="box"><span>인라인 가운데 정렬</span></div>
</body>
</html>
2) position과 transform: translate(x, y)을 이용한 방법:
인라인 요소인 이미지에 div를 감싸줘서 position:absolute;를 사용해서 가운데 정렬을 해준다.
하지만 이미지의 베이스라인은 왼쪽 상단이기 때문에 transform: translate:(-50%,-50%);를 사용해서
강제로 시작 위치를 옮겨주면 가운데 정렬이 된다.
<!DOCTYPE html>
<html>
<head>
<title>텍스트 정렬</title>
<style>
.text_center{
text-align: center;
}
.text_left{
text-align: left;
}
.text_right{
text-align: right;
}
.one {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="text_center">
<p>hello</p>
</div>
<div class="one">
<img width="100px" src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg" alt="">
</div>
<div class="text_left">
hello <span>왼쪽 정렬</span>
</div>
<div class ="text_right">
hello <span>오른쪽 정렬</span>
</div>
<div class="text_center">
<span>가운데 정렬</span>
</div>
</body>
</html>
- trnasform:translate(-50%,-50%) 적용 전
- trnasform: translate(-50%,-50%) 적용 후
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] async와 await 개념과 Fetch (0) | 2022.06.08 |
|---|---|
| [JavaScript] 비동기 처리 방식 (callback, setTimeout, promise) (0) | 2022.05.24 |
| [CSS] overflow:hidden 과 display:none 차이점 (0) | 2022.04.07 |
| [CSS] 인라인 요소와 블록라인 요소 개념과 display 프로퍼티 (0) | 2022.04.06 |
| [CSS] margin 병합 현상과 해결법 (0) | 2022.04.06 |