반응형
가로 세로 중앙 정렬 방법(1)에서는 여러 요소들을 중앙 정렬할 때 유용한 방법을 설명했다.
이번에는 간단히 text를 정렬하는 방법을 소개한다.
특히 header copy등을 삽입할 때 편리하게 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="Developer N">
<title>date methode</title>
<style>
.center {
background-color: rgb(6, 65, 23);
color: rgb(255, 255, 255);
padding: 5%;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">
[ 가로, 세로 중앙 정렬 ]<br />
padding의 크기로 height를 조정하고<br />
별도로 height는 지정하지 않는다.
</h1>
</body>
</html>
반응형
'CSS3' 카테고리의 다른 글
| [CSS3] 모서리 둥글게 하는 css 요소 border-radius (0) | 2019.12.04 |
|---|---|
| [CSS3] 사용하는 단위계의 종류 (0) | 2019.12.03 |
| [CSS3] outline과 border의 차이 (0) | 2019.12.01 |
| [CSS3] CSS style guide (0) | 2019.11.06 |
| [CSS3] 가로 세로 중앙 정렬 방법(1) (0) | 2019.10.29 |
| [CSS3] grid system : cell (0) | 2019.10.29 |
| [CSS3] grid system : template (0) | 2019.10.28 |
| [CSS3] grid system : Basic container (0) | 2019.10.28 |
DeveloperN
개발자 n의 개발 이야기(draft)
