IT/css

css Text Alignment

조원태 2017. 2. 6. 22:19
반응형

Text Alignment


text-align 속성은 텍스트의 가로 맞춤을 설정하는 데 사용됩니다.


텍스트는 왼쪽 정렬이나 오른쪽 정렬, 중앙 정렬 또는 양쪽 맞춤이 가능합니다.


다음 예제에서는 가운데 정렬 및 좌우 정렬 텍스트를 보여줍니다 (텍스트 방향이 왼쪽에서 오른쪽 인 경우 왼쪽 맞춤이 기본값이고 텍스트 방향이 오른쪽에서 왼쪽 인 경우 오른쪽 정렬이 기본값 임).


Example

h1 {

    text-align: center;

}


h2 {

    text-align: left;

}


h3 {

    text-align: right;

}





text-align 속성이 "justify"로 설정되면 모든 행의 폭이 동일하고 잡지의 왼쪽 및 오른쪽 여백이 직선이되도록 각 행이 늘어납니다.



Example

div {

    text-align: justify;

}




<!DOCTYPE html>

<html>

<head>

<style>

div {

    border: 1px solid black;

    padding: 10px;

    width: 200px;

    height: 200px;

    text-align: justify;

}

</style>

</head>

<body>


<h1>Example text-align: justify;</h1>


<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>


<div>

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

</div>


</body>

</html>



반응형

'IT > css' 카테고리의 다른 글

css 라인 높이 Line Height  (0) 2017.02.13
css 글자 간격 Letter Spacing  (0) 2017.02.13
css Text Color  (0) 2017.02.06
css Outline - Shorthand property  (0) 2017.02.06
css Outline Width  (0) 2017.02.04