버튼의 가운데 텍스트

이전에 몇 번 물어 보았지만 해결책이 아니라는 것을 알고 있습니다. 기본적으로이 버튼에 "재생"이라는 단어를 세로 및 가로로 가운데 놓기를 원합니다. 가로로, 텍스트 자체가 작동하지만 수직으로, 무엇을 시도해도 문제가되지 않습니다. 항상보다 약간 더 낮아야합니다. 테스트 할 모든 브라우저에서 작동합니다. 누구든지 어떤 제안이 있습니까? vertical-align 주셔서 감사합니다버튼의 가운데 텍스트

<style type="text/css"> 
button { 
font-family: Verdana, Geneva, sans-serif; 
color: white; 
border-style: none; 
vertical-align: center; 
text-align: center; 
} 

button:hover { 
cursor: pointer; 
} 

button::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
border: 0; 
padding: 0; 
} 


.start { 
background-color: #0C0; 
font-size: 2em; 
padding: 10px; 

} 


</style> 
<button type="button" class="start">play</button>

출처

2011-09-23 Lars

텍스트가 소문자 인 이유 일뿐입니다. http://jsfiddle.net/TYZX4/1/ –

좋은 점이지만 포토샵에서 측정했는데 대문자 버전은 여전히 정확한 중심에 있지 않습니다. 아마도 나는 너무 까다 롭습니다 ... – Lars

예, 그 시점에서 할 수있는 유일한 일은 '패딩 : 5px 10px 10px 10px;'http://jsfiddle.net/TYZX4/2/ –

padding on .start는 설정 방법은 비슷하지만 중심에 두어야 할 가능성이 있습니다. 그러나 당신은 그것을 무언가로 나눌 수 있습니다. padding: 8px 10px 10px 10px;

line-height을 .start 아래에서 확인하고 설정하여 도움이되는지 확인하십시오.

출처

2011-09-23 20:11:22

과 같은 것을 사용하는 것입니다. 기본 센터링이 정확하지 않은 것 같아서 꽤 우아하지는 않지만이 방법은 확실하게 작업을 완료합니다. 감사! – Lars

올바른 값은 middle하지 center입니다. 그러나 버튼 자체가 주변 텍스트에 비해 세로로 정렬되는 위치에 영향을 줄 수 있기 때문에 차이가 있는지 여부는 확실하지 않습니다. 그래도 버튼 텍스트가 기본적으로 세로로 가운데에 맞춰 졌는지는 확실합니다 ...

출처

2011-09-23 20:03:21

버튼의 가운데 텍스트

답변

관련 문제