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”括在跨度中

<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/