Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
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
Archives
Today
Total
관리 메뉴

codingfarm

block내 tag 수직정렬 본문

web/CSS3

block내 tag 수직정렬

scarecrow1992 2020. 10. 3. 17:41

 

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
32
<!doctype html>
<html>
    <head>
        <title>CSS3 Font Property</title>
        <style>            
            .font_big { font-size: 2em; }
            .font_italic { font-style: italic; }
            .font_bold { font-weight: bold; }
            .font_center { text-align: center; }
            
            .button{
                width: 150px;
                height: 70px;
                background-color: #FF6A00;
                border: 10px solid #FFFFFF;
                border-radius: 30px;
                box-shadow: 5px 5px 5px #A9A9A9;
            }
 
            .button > a {
                display : block;
                line-height : 70px;
            }
        </style>
    </head>
 
    <body>
        <div class="button">
            <a href="#" class = "font_big font_italic font_bold font_center">Click</a>
        </div>
    </body>
</html>
cs
 

text-align : center 에 의해 좌우로 중앙정렬

height와 line-height를 같은 크기로 맞추어 상하로 중앙정렬

 

글씨가 차지하는 한줄 폭을 조정함으로써 상하의 위치를 중앙으로 맞추었다.

이는 글이 한줄로 이루어 젔을때만 쓸 수 있는 중앙정렬 방법이다.

 

 

 

 

 

 

 

ㅌㅇ

'web > CSS3' 카테고리의 다른 글

float  (0) 2020.10.03
위치 속성  (0) 2020.10.03
box  (0) 2020.10.03
display  (0) 2020.10.02
color  (0) 2020.10.02
Comments