두 번째 단어가 원에서 벗어났습니다

Question

처음에는이 서클에 단어를 넣고 싶습니다. 최대 문자 수는 20입니다.

글꼴 크기를 약 24px로 설정하고 서클의 너비와 높이를 100px로 설정하고 싶습니다.

그러나 두 번째 단어는 원 밖으로 나갔습니다.

아무도 도와 줄 수 있습니까? http://codepen.io/yumikohey/pen/ocFtJ

여기 내 코드입니다.

<div class="blog_circle"> 
    Channel Buzz 
</div> 

.blog_circle{ 
    width:100px; 
    height: 100px; 
    border-radius:50px; 
    font-size:24px; 
    color:#000; 
    line-height:100px; 
    text-align:center; 
    background:#45C2B3; 
    margin-left: 50px; 
    margin-top: 50px; 
} 

반면에 글꼴 크기 변경 방법은 사용자의 입력에 따라 다릅니다.

Answer 1

왜 line-height:100px이 있습니까?

변화는 여기에 demo

UPDATE가 ........ 40px 말을 ...... 너무 높고 그 무엇은 원 벗어나는 원인입니다 :

자신의 스타일에 display:table-cell;을 추가하십시오. 이렇게하면 div의 텍스트가 세로로 가운데에 배치됩니다. 실제로 요소를 검사하고 div를 보면 텍스트가 div의 가운데에 세로로 있습니다. FIDDLE

Answer 2

원은 실제로 너비와 높이가 100px 인 사각형이며 모서리는 원의 시각을 제공하는 50px의 거리로 트리밍됩니다.

이제 폰트 크기로 말을해야하지만 라인 높이가 100px로 언급됩니다. 이제 이것은 선의 높이가 두 선 사이의 크기를 정의하는 판결 된 페이지 (선을 작성하는 선)를 상상하십시오. 이제 귀하의 경우 라인 높이는 전체 상자의 높이 인 100px입니다. 50px라고 말하기 위해 줄 높이를 낮추면 (100px 높이 상자 안에 2 줄을 써서 쓸 수 있습니다) 작동해야합니다.

희망이

Answer 3

이 padding를 사용 line-height과 다른 몇 가지를 변경해보십시오하는 데 도움이됩니다. DEMO