1.수평정렬
<!DOCTYPE html>
<html>
<head>
<style>
.container{
background-color: aqua;
padding: 40px;
margin: 10px;
}
.items{
padding: 30px;
margin: 10px;
background-color: violet;
}
.inlinealign{text-align: center;}
.blockalign{display: inline-block;}
.flex{display: flex; justify-content: center;}
</style>
</head>
<body>
<div class="container">
<a class="items">1</a>
<a class="items">2</a>
<a class="items">3</a>
</div>
inline요소
<div class="container inlinealign">
<a class="items">1</a>
<a class="items">2</a>
<a class="items">3</a>
</div>
블록요소
<div class="container inlinealign">
<div class="items blockalign">1</div>
<div class="items blockalign">2</div>
<div class="items blockalign">3</div>
</div>
flex
<div class="container flex">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
</div>
</body>
</html>inline요소 블록요소
1
2
3
1
2
3
2.수직정렬
<!DOCTYPE html>
<html>
<head>
<style>
.containerz{
background-color: aqua;
padding: 40px;
margin: 10px;
}
.items{
padding: 30px;
margin: 10px;
background-color: violet;
width: 10px;
}
.inlinealign{text-align: center;}
.blockalign{display: inline-block;}
.flex{display: flex; justify-content: center;}
.flexcol{flex-direction: column;}
</style>
</head>
<body>
<div class="containerz flex flexcol ">
<a class="items">1</a>
<a class="items">2</a>
<a class="items">3</a>
</div>
<div class="containerz flex flexcol">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
</div>
</body>
</html>
1
2
3
3.수직,수평정렬
<!DOCTYPE html>
<html>
<head>
<style>
.containerz{
background-color: aqua;
padding: 40px;
margin: 10px;
}
.items{
padding: 30px;
margin: 10px;
background-color: violet;
width: 10px;
}
.inlinealign{text-align: center;}
.blockalign{display: inline-block;}
.flex{display: flex; justify-content: center;}
.flexcenter{display: flex; justify-content: center; align-items: center;}
.flexcol{flex-direction: column;}
</style>
</head>
<body>
<div class="containerz flexcenter" style="height: 500px;">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
</div>
</body>
</html>1
2
3
🎈참고자료
https://poiemaweb.com/css3-centering
'FrontEnd > css' 카테고리의 다른 글
| [CSS] 플렉스 박스 레이아웃 (0) | 2024.06.13 |
|---|---|
| [CSS] 반응형 레이아웃 (1) | 2024.06.12 |
| [CSS] 레이아웃 (0) | 2024.06.12 |
