본문 바로가기

홈페이지만들기/Html_css&css3

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

반응형

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>
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 배치하기


반응형