vertical-align와 text-align CSS 활용하여 정렬하기

텍스트를 가로정렬과 세로정렬을 알아보도록 하겠습니다. CSS의 텍스트 정렬에는 vertical-align(세로정렬)과 text-align(가로정렬)가 있는데 우선 vertical-align 은 요소들 간의 세로정렬을 조절하는 CSS입니다. block에는 적용이 되지 않고 inline에만 가능합니다.

<span> 태그가 아닌 <div> html에서 적용하려면 display : table-cell을 적용해서 inline으로 변경해야 합니다. <div> 요소가 줄 바꿈이 되지 않고 옆으로 정렬된 것은 inline 으로 바뀐 것입니다.

text-align 을 이용해서 마지막 text4번 속성에 left, right, center, justify 를 이용해서 정리하면 보다 디테일 하게 정리 가능합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
    body { 
    font-family:Verdana, Geneva, sans-serif;
    background-color: #e7e7e7; 
    }
    div {
        width: 25%;
        height: 100px;
        padding: 5px;
        border: 3px solid;
        border-color: #fff;
        color: #FFF;
        background-color: #3CF;
        display: table-cell;
    }
    #text1 {vertical-align: top;}
    #text2 {vertical-align: middle;}
    #text3 {vertical-align: bottom;}
    #text4 {vertical-align: middle; text-align:center;}
</style>
Colored by Color Scripter
cs

</head>

<body>

1
2
3
4
<div id="text1">vertiacl-align 정렬 : top</div>
<div id="text2">vertiacl-align 정렬 : middle</div>
<div id="text3">vertiacl-align 정렬 : bottom</div>
<div id="text4">vertiacl-align 정렬 : middle</br>text-align 높이정렬:center</div>
cs

</body>

</html>

[홈페이지만들기] - html 순서 및 목록 만들기

[홈페이지만들기] - html 창크기 조절(반응형코딩)

[홈페이지만들기] - div 프레임나누기

[홈페이지만들기] - ul li 가로정렬로 메뉴만들기 (css가로정렬)

[홈페이지만들기] - div 배치하기

저작자표시 비영리 동일조건

'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글

CSS 링크의 color와 background-color (0)	2017.02.13
CSS style 컬러 기본설정 (0)	2017.02.09
html 순서 및 목록 만들기 (2)	2017.02.02
html 창크기 조절(반응형코딩) (7)	2017.01.28
ul li 가로정렬로 메뉴만들기 (css가로정렬) (5)	2017.01.27

미래디자인 life

vertical-align와 text-align CSS 활용하여 정렬하기