[CSS3] 가로 세로 중앙 정렬 방법(2)

CSS3 2019. 10. 30. 00:05
반응형

가로 세로 중앙 정렬 방법(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)

,

[CSS3] 가로 세로 중앙 정렬 방법(1)

CSS3 2019. 10. 29. 23:35
반응형

자주 사용되면 서도 늘 찾게 되는 것이 요소의 중앙 정렬이다.

다음은 중앙 정렬의 예시이다. 중앙 정렬 방법은 여러가지가 있기 때문에 정렬 요소에 따라 방법이 달라 질 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer N">
  <title>date methode</title>
  <style>
    .center { 
      height: 200px;
      position: relative;
      border: 3px solid green; 
    }
    .center div {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .center p {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="center">
    <div>
      <p>Horizontal & Vertical Align<br>가로 및 세로 정렬</p>
      <p>여러 요소 동시에 정렬 할 수 있다.</p>
    </div>
  </div>
</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] 가로 세로 중앙 정렬 방법(2)  (0) 2019.10.30
[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)

,
반응형

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바