【CSS】text-align
text-align
블록 요소 중에서 인라인 요소와 인라인 블록 요소의 배치를 지정할 수 있습니다.
text-align: left;
왼쪽 정렬
예.html
<div class="position">
<span>ここだよ</span>
</div>
예.css
.position {
width: 300px;
height: 200px;
background-color: orange;
text-align: left;
}
웹
↓
문자가 왼쪽 정렬되어 있다는 것을 알고 싶습니다
text-align: center;
중앙 정렬
예.css
.position {
width: 300px;
height: 200px;
background-color: orange;
text-align: center;
}
웹
↓
문자가 가운데 정렬되어 있습니다
text-align: right;
오른쪽 맞춤
예.css
.position {
width: 300px;
height: 200px;
background-color: orange;
text-align: right;
}
웹
↓
오른쪽 정렬
주의사항
이번에는 text-align
예.css
span {
text-align: right;
}
위와 같이 span에 걸릴 것 같습니다.
span에 걸려 버려도 아무것도 반응하지 않습니다.
이유는 제일 먼저 쓴 대로
블록 요소 중에서 인라인 요소, 인라인 블록 요소의 배치를 지정할 수 있습니다.
부터입니다.
즉 이번에 말하면 폭:300px의 블록 요소 속에 있다
인라인 요소의 span을 오른쪽에 맞 춥니 다.
라고 하는 명령을 하는 것으로 span 는 오른쪽 정렬이 됩니다.
그래서 span 에 text-align: right; 를 걸어 버려도
그래? 그래? 오른쪽은 어디까지 오른쪽으로 가야할까? ?
text-align: center; 무슨 걸까요?
오른쪽도 왼쪽도 모르는데 중앙은 어디야!
과 span 짱이 어려워 아무것도 반응하지 않습니다
Reference
이 문제에 관하여(【CSS】text-align), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mikimikiman/items/4ab66bdcfe0c24a12345텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)