원 정중앙에 텍스트 배치는 어떻게 하나요?
본문
아래 코드를 썼는데 원 정중앙에 ★이 안 오는데 어떻게 해결해야 할까요? ㅠㅠ
<div class="circle">★</div>
.circle {
display: flex;
align-items: center;
justify-content: center;
width: 15vw;
height: 15vw;
max-width: 120px;
max-height: 120px;
border: 9px solid black;
border-radius: 50%;
margin-right: 15px;
font-size: min(8vw, 70px);
font-weight: bold;
color: black;
flex-shrink: 0;
line-height: 1;
}
@media (max-width: 600px) { /* 모바일 화면 크기에 맞게 조정 */
.circle {
width: 20vw;
height: 20vw;
font-size: min(10vw, 70px);
}
}
아래 사진처럼 모바일에서는 ★이 정중앙에 잘 오는데 pc 화면에서는 정중앙에서 살짝 아래로 내려가서요.
ChatGPT한테 계속 물어보고 여러 번 수정해도 해결이 안 되네요.
pc화면에서도 모바일화면처럼 원 딱 정중앙에 ★를 위치시키려면 어떻게 해야할까요?
답변 1
line-height: 15vw; 일반 및 미디어쿼리 둘다 추가하시고 미디어쿼리에서는 20으로주세요
즉 height 값과 동일하게요
정말 감사합니다. 도와주신 부분에서 힌트를 얻어 해결했습니다. 감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.
