>웹 프론트엔드 >CSS 튜토리얼 >CSS로 그린 원 내에서 텍스트를 가운데에 배치하는 방법은 무엇입니까?

CSS로 그린 원 내에서 텍스트를 가운데에 배치하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-12-07 02:01:11591검색

How to Center Text within a CSS-Drawn Circle?

가운데에 텍스트가 있는 원을 그리는 방법

CSS를 사용하여 가운데에 텍스트가 있는 원을 만들려면 사용된 코드를 수정하세요. 원을 그리려면:

  1. 원의 높이와 일치하도록 선 높이를 설정합니다. div. 이렇게 하면 한 줄의 텍스트가 세로 중앙에 표시됩니다. 아래 예에서는 높이와 줄 높이가 모두 500px로 설정되어 있습니다.
.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}
  1. div에 텍스트를 추가하세요. 원하는 텍스트를
    element.
<div class="circle">Hello I am A Circle</div>

이 코드는 "Hello I am A Circle"이라는 텍스트가 중앙에 위치하는 중앙 원을 생성합니다.

위 내용은 CSS로 그린 원 내에서 텍스트를 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.