Web/WEB기본

[CSS] webkit에서 사용되는 CSS text-align 속성값들

saltdoll 2013. 10. 12. 15:14
반응형

글자의 정렬에 사용되는 CSS속성인 text-align

text-align에 대한 속성 값들을 확인해 보자.

text-aling: -webkit-auto; /* Android 모바일 브라우저의 기본값 */

text-aling: -webkit-center;

text-aling: -webkit-left;

text-aling: -webkit-right;

text-aling: center;

text-aling: end;

text-aling: inherit;

text-aling: initial;

text-aling: justify;

text-aling: left;

text-aling: right;

text-aling: start; /* PC 웹킷의 기본값 */

 

간혹 글자가 깨지는 현상을 발견할 때가 있다.

justify로 줘도 안되고 이상하게 안될 때는, start를 추천한다.

 

 

text-align속성 값들

 

 

객체의 기본 text-align 확인 alert창 

<div onclick="alert($(this).css('text-align'))" ...>

 

 

 

text-algin

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

 

start 

The same as left if direction is left-to-right and right if direction is right-to-left.

end  

The same as right if direction is left-to-right and left if direction is right-to-left.

left

The inline contents are aligned to the left edge of the line box.

right

The inline contents are aligned to the right edge of the line box.

center

The inline contents are centered within the line box.

<string>  

The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance.

justify

The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

match-parent  

Similar to inherit with the difference that the value start and end are calculated according the parent's direction and are replaced by the adequate left or rightvalue.

 

 

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)