인라인 블록의 텍스트 가운데 맞추기

인라인 블록 단추 중 하나에 텍스트를 가운데 맞춤해야합니다. 어떻게이 일을 성취 할 수 있습니까? 어떤 도움을 주시면 감사하겠습니다.인라인 블록의 텍스트 가운데 맞추기

소스 코드 :

CSS :

.dropMenu 
{ 
    color: #FFFFF0; 
    text-decoration: none; 
    display: inline-block; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    text-align: center; 
} 

.dropMenu:hover, 
.dropMenu.selected 
{ 
    background-color: #544E4F; 
}

HTML :

<a href="#" class='dropMenu'><input type="image" src="images/down.png" name="dropDown" width="23" height="23">dropMenu</a>

vertical-align : middle없이 :

http://img140.imageshack.us/img140/7476/withoutt.png

함께 : 당신이 당신의 옵션은 옵션 당 한 줄에 맞게려고하고 있다는 것을 확실히 알고 있다면

http://img834.imageshack.us/img834/904/withe.png

출처

2011-02-28 Sindar

시도를, 그것은 다르게 작동 어떻게 작동하는지 완전히 이해하지 못한다면 예기치 않은 행동을 할 것입니다. – HyderA

jsfiddle : http://jsfiddle.net/Zfdra/1/에서 재생 - 검정색 배경이 추가되어 텍스트가 보입니다. – HyderA

@ gAMBOOKa : jsfiddle이없는 html/js/css 질문이 모두 거부됩니다. –

는

난 그냥 그의 CSS 레이블을 추가하고 변경하여 해결책을 찾기했습니다

버튼 수직 정렬의 사용을 피하는

<a href="#no-reload" id='dM1' class='dropMenuButton'><input type="image" src="images/down.png" name="dropDown" width="18" height="18"><label for="dropDown">Menu</label></a>

CSS는

label 
{ 
    padding: 0 5px 0 5px; 
    vertical-align:super ; 
} 

.dropMenuButton 
{ 
    color: white; 
    text-decoration: none; 
    display: inline-block; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    padding: 5px 5px 5px 5px; 
}

출처

2011-03-04 16:16:54 Sindar

, 당신은 높이를 설정합니다 line-height 속성을 사용하여 텍스트가 자동으로 상하 중앙됩니다.

는

출처

2011-02-28 17:59:07 jeroen

다음과 같은 것을 의미합니다 : line - 높이 : 10px; 작동하지 않습니다 – Sindar

@Sindar 10px로 충분합니까? 메뉴의 높이로 설정해야합니다. – jeroen

@Sindar, 만약 당신이'input' *과 * 그것의 부모'a' 요소에 모든 패딩 (padding)을 제거했다면 보장 할 수 있습니다. –

인라인 블록의 텍스트 가운데 맞추기

답변

관련 문제