예제

[ HTML, CSS ] Box 생성, Text 삽입

Jooninim 2018. 2. 19. 20:56

[ 완성본 ]


[ 예제 설명 ]

1. 정사각형 박스를 만든다.

2. 박스 안에 'Center' 라는 글씨를 상단 중앙에 정렬 시킨다.

3. 박스를 화면의 중앙에 위치한다.


[ 코딩 ]

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            가운데 요소정렬 하기
        </title>
        <style type="text/css">
            div{
                border: thin solid black;
                margin: auto;
                width: 200px;
                height: 200px;
                position: relative;
                top: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
         <div>
             Center
         </div>
    </body>
</html>
cs