티스토리 뷰

CSS

[HTML/CSS] box, text 정렬하기 ( margin, text-align, translate, text centering)

baegofda_ 2020. 8. 2. 17:17

* margin, text-align, translate, text centering

  • margin : auto;

 

        - 라인내에 한 컨텐츠만 정렬 시킬때

 

  • text-align : center; 

 

        - 특성이 block가 아니라 inline의 경우에 텍스트 뿐만아니라 컨텐츠도 가운데로 정렬 가능

 

  • transform : translat(50%, 50%);

 

        - x,y 이동 가능

        - 이동하거나 회전도 가능

 

  • line-height :

 

        - 폰트매트릭스를 이용하여 텍스트 수직 정렬이 가능하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: beige;
      }

      .inner {
        width: 50%;
        height: 50%;
        background-color: blue;
      }

      .inner1 {
        margin: auto;
      }

      .box2 {
        text-align: center;
      }

      .inner3 {
        transform: translate(50%, 50%);
      }

      .box4 h1 {
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <h3>margin: auto</h3>
    <div class="box box1">
      <div class="inner inner1"></div>
    </div>
    <h3>text-align: center</h3>
    <div class="box box2">
      <button>Text</button>
    </div>
    <h3>translate(50%, 50%)</h3>
    <div class="box box3">
      <div class="inner inner3"></div>
    </div>
    <h3>Text centering</h3>
    <div class="box box4">
      <h1>Text<br />Text</h1>
    </div>
  </body>
</html>
저작자표시

'CSS' 카테고리의 다른 글

💡 CSS 란 무엇일까?  (0) 2020.11.04
[HTML/CSS] Custom Properties  (0) 2020.08.06
[HTML/CSS] Transition  (0) 2020.08.02
[HTML/CSS] background  (0) 2020.08.02
[HTML/CSS] Input type="date" placeholder 없애기  (0) 2020.07.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
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
글 보관함