티스토리 뷰
css를 통해서 텍스트를 수직, 수평 정렬 할 수 있다.
수직 정렬은 vertical-align 속성을 이용하며, 수평 정렬은 text-align 속성을 이용한다.
이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있다는 것이다. 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 수직, 수평 정렬이 적용되지 않는다.
vertical-align
요소의 수직 정렬을 지정하는 속성이다. (기본 값 : baseline)
vertical-align: keyword | length | percent | initial | inherit ;
vertical-align의 속성 값
keyword : baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom
- sub : 부모 아래 첨자 기준으로 정렬
- super : 부모 위 첨자 기준으로 정렬
- text-top : 부모 텍스트의 맨 위(Ascender 제외)
- text-bottom : 부모의 텍스트의 맨 아래(Descender 제외)
- top : 부모의 맨 위 위치
- middle : 부모의 중앙에 위치
- bottom : 부모의 맨 아래 위치
vertical-align: baseline;
vertical-align: middle;length : 요소를 지정한 길이만큼 올리거나 내림 (음수 허용)
- px값 사용 시 baseline을 기준으로 이동한다.
vertical-align: 10em;
vertical-align: 4px;
vertical-align: -10px;percent(%) : 요소를 line-height를 기준으로 올리거나 내림 (음수 허용)
vertical-align: 20%;
www.w3schools.com/cssref/pr_pos_vertical-align.asp
CSS vertical-align property
CSS vertical-align Property Example Vertical align an image: img.a { vertical-align: baseline; } img.b { vertical-align: text-top; } img.c { vertical-align: text-bottom; } img.d { vertical-align: sub; } img.e { vertical-align: super; } Tr
www.w3schools.com
text-align
텍스트의 정렬을 지정하는 속성이다. (기본 값 : left (Right to Left 언어일 경우는 right))
text-align: left | right | center | justify | initial | inherit ;기본 값은 left이지만 경우에 따라 다르게 적용될 수 있다. 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 된다.
text-align의 속성 값
left : 텍스트를 왼쪽으로 정렬
right : 텍스트를 오른쪽으로 정렬
center : 텍스트를 중앙으로 정렬
justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)
text-align: left;
text-align: right;
text-align: center;
text-align: jstify;
text-align과 display의 관계
vartical-align과 text-align은 block-level에 적용할 수 없다. 그렇다면 block 요소를 가운데 정렬 하고나 한다면 어떻게 해야 할까? margin의 auto 값을 이용하면 된다.
이때 'block-level에 적용할 수 없다'는 것은 block-level 자체에 대한 정렬이 적용되지 않다는 것이지 block-level 내부 요소에 대해서는 적용이 가능하다.
<div style="text-align: left;">left</div> /* 왼쪽 정렬이 적용된다. */<body style="text-align: left"> /* 왼쪽 정렬이 적용되지 않는다. */
<div>left</div>
</body>
See the Pen CSS_text-align by RIANAEH (@rianaeh) on CodePen.
'Frontend' 카테고리의 다른 글
| [CSS] text-decoration, 텍스트 꾸미기 (0) | 2020.10.23 |
|---|---|
| [CSS] text-indent, 들여쓰기 (0) | 2020.10.23 |
| [CSS] 폰트 (font) - 폰트 속성 설정, 폰트의 축약형 (0) | 2020.10.23 |
| [CSS] 폰트 (font) - font-variant, 대소문자 변환 (0) | 2020.10.23 |
| [CSS] 폰트 (font) - font-style, 폰트 스타일 (0) | 2020.10.23 |