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/

按钮垂直文本

2 个答案: