CSS - CSS 텍스트정렬 text-align

웹언어/CSS 2018. 11. 9. 09:00

CSS - CSS 텍스트정렬 text-align 알아보기

이번 포스팅에서는 텍스트를 정렬하는 방법인 text-align에 대해서 알아보겠습니다

text-align은 윈쪽 정렬 / 가운데 정렬 / 오른쪽 정렬 / 양쪽 정렬하는 속성입니다

CSS - CSS text-align 사용해보기

1. text-align 왼쪽정렬

File : my.html

<html>
<head>
    <link rel="stylesheet" href="my.css" type="text/css">
</head>
<body>
    <div id="text_align">
        <div class="left">
            text-align
        </div>
    </div>
</body>
</html>

File : my.css

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}

출력결과 :

text-align

처음 왼쪽 정렬은 되어 있기때문에 변한것을 느끼기 힘들것입니다

2. text-align 가운대 정렬

File : my.html

<html>
<head>
    <link rel="stylesheet" href="my.css" type="text/css">
</head>
<body>
    <div id="text_align">
        <div  class="left">
            text-align
        </div>
        <div  class="center">
            text-align
        </div>
    </div>
</body>
</html>

File : my.css

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}
#text_align .center {text-align:left; border:1px solid red;}

출력결과 :

text-align

두번째는 중앙 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다

3. text-align 오른쪽 정렬

File : my.html

<html>
<head>
    <link rel="stylesheet" href="my.css" type="text/css">
</head>
<body>
    <div id="text_align">
        <div  class="left">
            text-align
        </div>
        <div  class="center">
            text-align
        </div>
        <div  class="right">
            text-align
        </div>
    </div>
</body>
</html>

File : my.css

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}
#text_align .center {text-align:center; border:1px solid red;}
#text_align .right {text-align:right; border:1px solid red;}

출력결과 :

text-align

세번째는 오른쪽 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다