一个按钮包含图标,文字时,大家有什么较好的写法?对齐问题是怎么解决的?
这是支付宝首页的,看了下源码使用的绝对定位:
我写的demo,使用vertical-align: -2px
,慢慢调出来的
效果:
地址:http://jsfiddle.net/o6h0w8u5/
源码:
<div class="ub-chat">
<i></i>
聊天
</div>
body{
background-color: #EFEFEF;
}
.ub-chat{
display: inline-block;
border-radius: 3px;
height: 42px;
line-height: 42px;
text-align: center;
background-color: #fff;
color: #ff6230;
width: 120px;
font-size: 15px;
}
.ub-chat i{
display: inline-block;
width: 16px;
height: 16px;
background: transparent url(http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/bottom_chat@2x.png) no-repeat center center;
background-size: 16px auto;
margin-right: 4px;
vertical-align: -2px;
}
参考,我就不再写一边了
http://.com/q/1010000002779505
vertical-align: middle 就好了吧
难道……你是想发文章?http://.com/write
不知道这样的效果你满意否。
如:
.icon-style {
width:3em
height:3em
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
<div class="icon-style">
<span class="icon-trash"></span>
</div>
按钮外部:
猜想的是两个按钮放在一个 div 下,然后 div 的 width 是 body 的 100%,内容属性设置为:text-align: center
,这样做的好处是无论浏览器窗口大小,两个按钮总能居中显示。
看了一下原网页的代码结构,也是这样设置的。
至于您说的绝对定位,不太理解具体是指什么意思,匆匆找了一下,在源码里面没找到相关的内容,可能是自己疏忽了。按钮内部:
我大概拉了一下标尺,如下图:
文字前面有 icon,这样的样式我的解决方案一般是:icon 作为文字所在标签属性的背景插入,文字部分设置text-indent
属性缩进就可以解决背景被文字遮挡的问题了。
PS:但是文字距按钮边缘的右边距和 icon 距按钮边缘并不相等,个人觉得设置为相等是否更好。不过这又是另一个问题了。