수다닷컴

span 태그 안의 텍스트를 가운데 정렬할 수 있나요?

솔길 2025.01.19 댓글 7

CSS 선택자는 쉼표로 여러 개를 구분할 수 있다고 해서 적용해봤어요.
그런데 h1 태그와 p 태그의 텍스트는 가운데 정렬되는데 span 태그만 왼쪽에 남아 있어요.
span은 인라인 태그라 margin이나 padding으로 정렬하기 어렵다고 알고 있는데, span 안의 글자는 어떻게 가운데나 오른쪽으로 정렬할 수 있나요?
스타일에서 `.text, .text_1, name { color: #00C; text-align: center; }`처럼 작성하고 h1, p, span에 각각 클래스를 적용했습니다.

댓글 7

  • 찰스 2025.01.19

    답변 정말 감사합니다!

  • 조으다 2025.01.19

    name 클래스 선택자가 잘못된 것 같아요. 앞에서 말씀하신 것처럼 점이 빠진 듯합니다.

  • 둘삥 2025.01.19

    왜 name 앞에 점이 없죠?

  • Sonya 2025.01.19

    그렇군요. span은 텍스트를 감싸는 인라인 태그라 정렬이 바로 적용되지 않았네요.
    꼭 정렬해야 한다면 말씀처럼 display: block으로 바꾸면 되겠어요. 그렇게까지 할 필요는 없을 것 같지만요. 고맙습니다.

  • 콩알녀 2025.01.19

    h1과 p는 블록 요소라 가로 공간을 차지해요.
    h1, p, span에 `border: 1px solid black;`을 넣어보면 차이가 더 잘 보일 거예요 ㅎㅎ

  • 세련 2025.01.19

    제가 깜빡했네요!!

  • 이뻐 2025.01.19

    span을 div로 바꾸고 display: inline-block을 적용하는 방법이 떠오르네요.
    아니면 div에 float: left와 text-align: center를 적용할 수도 있어요.