반응형
div를 이용해서 정사각형을 만들고 div 안에 텍스트를 가로, 세로 가운데(중앙) 정렬하는 한 예이다.
설명>
정사각형을 먼저 만들고
가로 정렬을 위해서 text-align:center를 사용하고
세로 정렬을 위해서 top:25%로 지정해서 세로 정렬을 한다.
가로 정렬은 크기가 변경이 되어도 가운데 정렬이 되나
세로 정렬은 크기가 변경되면 크기에 맞춰 top 값을 변경해서 맞춘다.
소스 예>
<html>
<head>
<title>div 정사각형안에 글자 가운데 정렬</title>
<style>
.type1 {height: 35px; width: 35px;border:1px solid;}
.type2 {top: 25%; position: relative; text-align: center;}
</style>
</head>
<body>
<div class='type1'><div class='type2'>1</div></div>
</body>
</html>
더보기>
반응형
