가로 가운데 정렬
1. inline / inline-block 요소 가운데 정렬
: 부모태그에 text-align: center를 써주면 됩니다. block레벨은 한 줄을 다 차지하기떄문에 tex-align 그냥 써주면 됩니다:)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>baseline</title>
</head>
<body>
<div class="container">
텍스트이지롱~ <img src="images/3.png">
</div>
</body>
</html>
.container{
background-color: aquamarine;
text-align: center;
}
2. block 요소 가운데 정렬
width가 100% 일때는 당연히 가운데 정렬이 되겠죠? 근데 100%가 아닐땐 어떻게 해야할까요?
margin-left: auto; margin-right: auto; 를 주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>baseline</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>.container{
background-color: aquamarine;
height: 100px;
width: 200px;
}
style.css에 margin-left: auto; margin-right: auto; 추가해주기
.container{
background-color: aquamarine;
height: 100px;
width: 200px;
margin-left: auto;
margin-right: auto;
}
짜잔! 완성했씁니다