CSS 빈 텍스트가있는 버튼의 위치 지정

Question

height - min-width - 및 border으로 스타일이 지정된 세 개의 간단한 HTML 단추가 있습니다. 하나는 텍스트이고, 두 번째는 제동 공간이 아니며, 마지막은 빈 텍스트입니다.

브라우저보기에 문제가 있습니다. 빈 텍스트가있는 마지막 버튼이 다른 위치에서 인쇄됩니다.

CSS :

.test { 
    height: 27px; 
    border: 1px solid #b4b1ff; 
    min-width: 54px; 
} 

HTML :

<button class="test">Text</button>  <!-- with text --> 
<button class="test">&nbsp;</button> <!-- with Non Breaking Space --> 
<button class="test"></button>   <!-- Empty ?? --> 

수직 그들에게

JSFiddle Demo를 정렬에 필요한 것, 그래서 나는 기본적으로 inline을 믿고, fiddle

Answer 1

버튼 요소가 참조

CSS

body { margin: 0; padding: 0; } 
.test { 
    height: 27px; 
    border: 1px solid #b4b1ff; 
    vertical-align: top; 
}