우선 혼자서 구역을 나누고 텍스트를 구역에 입력한 후에 텍스트를 구역내에서 가운데 정렬을 하려고 하는데 어떻게 해야 할까요?
위의 이미지에서 구역내에 있는 텍스트가 위쪽으로 치우쳐 있는데 글자를 정중앙 쪽으로 배치를 하고 싶습니다.
제가 작성한 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<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>
.section1 {
background-color: grey;
width: 500px;
height: 500px;
border-radius: 30px;
color: white;
text-align: center;
margin: 100px auto auto auto;
padding: 100px 100px 100px 100px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR43BPry8TMW5Z0EQKmucruTKiq-NfJymzd7EhqrSQHaQlOw54TLrFv52pOoe8Mdlz35GGCZspM8vpiBoo');
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="section1">
<h1>가운데 정렬</h1>
<h2>가운데 정렬</h2>
<h3>가운데 정렬</h3>
</div>
</body>
</html>
여기서 padding으로 조절을 해보고 있는데 쉽지가 않네요
