CSS로 만든 원 내에서 텍스트를 가운데에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-12-04 06:48:14

원래의

591명이 탐색했습니다.

How to Center Text within a CSS-Created Circle?

중앙에 텍스트를 포함하도록 CSS 원 수정

CSS만 사용하여 원을 그리는 예를 찾았습니다. 그러나 이제 중앙에 텍스트를 포함하도록 수정하려고 합니다.

먼저 다음 해결 방법을 시도해 보세요.

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

로그인 후 복사

<div class="circle">Hello I am A Circle</div>

로그인 후 복사

안타깝지만 이로 인해 타원형 모양이 나타날 수 있습니다. 원.

해결책

세로 중앙에 텍스트의 경우 line-height를 div의 높이와 동일한 값으로 설정합니다. 위 예시에서는 높이와 줄 높이가 모두 500px로 설정되어 있습니다.

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px; /* Vertically center the text */
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000;
}

로그인 후 복사

이렇게 수정하면 텍스트가 원 중앙에 표시됩니다.

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