【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 짱이 어려워 아무것도 반응하지 않습니다