Fall in IT.

div 태그 수평(horizontal) 가운데 정렬하는 방법 본문

프로그래밍언어/Html & Css

div 태그 수평(horizontal) 가운데 정렬하는 방법

D.Y 2017. 10. 11. 18:47


안녕하세요.
오늘은 <div> 태그를 가운데 수평 가운데 정렬하는 방법에 대해서 알아보겠습니다.



<div> 태그 수평(horizontal) 가운데 정렬하는 방법

  • parent div 와 child div 의 position이 기본(static) 또는 relative일 경우 (아래 코드 참조)
    - sample code)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .parent {
    border: 4px solid tomato;
    width: 700px;
    height: 700px;
    }

    .child {
    border: 2px solid gold;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    }
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="child">

    </div>
    </div>
    </body>
    </html>
  • 결과

  • child의 div position이 absolute 일 경우
    - sample code )

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .parent {
    position: relative;
    border: 4px solid tomato;
    width: 700px;
    height: 700px;
    }

    .child {
    position: absolute;
    border: 2px solid gold;
    width: 200px;
    height: 200px;
    left: 50%;
    transform: translate(-50%,0);
    }
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="child">

    </div>
    </div>
    </body>
    </html>
  • 결과
    - 위와 동일합니다.



다음 시간에는 <div> 태그 수직(vertical) 가운데 정렬하는 방법에 대해서 알아보도록 하겠습니다.



모두 즐거운 코딩하세요~



저작자표시 비영리

'프로그래밍언어 > Html & Css' 카테고리의 다른 글

패딩 영역은 제외하고 백그라운드 색상 입히는 방법  (0) 2017.12.07
div 태그 수직(vertical) 가운데 정렬하는 방법  (0) 2017.10.12
em, rem 개념 정리하기  (0) 2017.09.27
Flex를 사용하여 웹페이지 레이아웃 잡는 방법  (0) 2017.03.04
웹페이지 간단하게 레이아웃 잡는방법  (0) 2017.02.23
공유하기 링크
'프로그래밍언어/Html & Css' Related Articles more
Comments