원 정중앙에 텍스트 배치는 어떻게 하나요? 채택완료
하호헤하
1년 전
조회 12,060
아래 코드를 썼는데 원 정중앙에 ★이 안 오는데 어떻게 해결해야 할까요? ㅠㅠ
<div class="circle">★</div>
.circle {</p>
<p> display: flex;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> width: 15vw;</p>
<p> height: 15vw;</p>
<p> max-width: 120px;</p>
<p> max-height: 120px;</p>
<p> border: 9px solid black;</p>
<p> border-radius: 50%;</p>
<p> margin-right: 15px;</p>
<p> font-size: min(8vw, 70px);</p>
<p> font-weight: bold;</p>
<p> color: black;</p>
<p> flex-shrink: 0;</p>
<p> line-height: 1;</p>
<p>}</p>
<p> </p>
<p>@media (max-width: 600px) { /* 모바일 화면 크기에 맞게 조정 */</p>
<p> .circle {</p>
<p> width: 20vw;</p>
<p> height: 20vw;</p>
<p> font-size: min(10vw, 70px);</p>
<p> }</p>
<p>}</p>
<p>
아래 사진처럼 모바일에서는 ★이 정중앙에 잘 오는데 pc 화면에서는 정중앙에서 살짝 아래로 내려가서요.
http://sir.kr/data/editor/2405/1995115642_1716398991.4055.jpg" width="100%" />
ChatGPT한테 계속 물어보고 여러 번 수정해도 해결이 안 되네요.
pc화면에서도 모바일화면처럼 원 딱 정중앙에 ★를 위치시키려면 어떻게 해야할까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인