html - ボタンの縦書き

Question

HTML

<button class="btn" id="servicos">b</button>

CSS

.btn{
line-height: normal;
display:inline;
position:relative;
border: 0;
margin:0;
width:6%;
height:95%;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 0;
background-color: #000000;
text-align:center;
font-size: 18px;
vertical-align:top;
}

私の問題は、ボタンの幅と高さがボタン内のテキストの垂直方向の中央にあるため、テキストを上に配置する方法はありますか?

Answer 1

"b" を span で囲む

<button class="btn" id="servicos"><span>b</span></button>
<style>
.btn{
line-height: normal;
color:white;
display:inline;
position:relative;
border: 0;
margin:0;
width:6%;
height:95%;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 0;
background-color: #000000;
text-align:center;
font-size: 18px;
vertical-align:top;
}
.btn span{
position:absolute;
top:0px;
border:1px solid red;
}
</style>

Answer 2

はい、これは可能ですが、特定の css プロパティを持つ追加の要素をボタン内に配置した場合に限ります。

JSfiddle の例があります。

.btn #buttontext
{
position: relative;
top: -6px
}

http://jsfiddle.net/wSVJK/