원 정중앙에 텍스트 배치는 어떻게 하나요?

원 정중앙에 텍스트 배치는 어떻게 하나요?

QA

원 정중앙에 텍스트 배치는 어떻게 하나요?

본문

아래 코드를 썼는데 원 정중앙에 ★이 안 오는데 어떻게 해결해야 할까요? ㅠㅠ

 

 <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 화면에서는 정중앙에서 살짝 아래로 내려가서요.

 

1995115642_1716398991.4055.jpg

 

ChatGPT한테 계속 물어보고 여러 번 수정해도 해결이 안 되네요.

 

pc화면에서도 모바일화면처럼 원 딱 정중앙에 ★를 위치시키려면 어떻게 해야할까요?

이 질문에 댓글 쓰기 :

답변 1

line-height: 15vw;  일반 및 미디어쿼리 둘다 추가하시고 미디어쿼리에서는 20으로주세요

즉 height 값과 동일하게요

답변을 작성하시기 전에 로그인 해주세요.
전체 130
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT