icon图标和文字整体居中在button按钮
icon图标和文字整体居中
一般我们常做的button按钮是文字居中
现在这个需要icon图标和文字一起居中在背景色
<a href="#" class="button ios" >苹果版下载</a>
----------------------
.button {
width: 80%;
height: 60px;
line-height: 60px;
margin: 0 auto;
display: block;
background: #318BE3;
margin-bottom: 25px;
color: #FFFFFF;
font-size: 22px;
text-align: center; 居中显示,这样左右空隙一样
cursor: pointer;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
letter-spacing: 5px;
}
--------------------------------
.button-outer .ios:before {
content: '';
display: inline-block;
width: 33px;
height: 33px;
margin: 0 auto;
background: url(../images/apple-icon.png) no-repeat;
background-size: 33px 33px;
vertical-align: middle; 为了图标和文字居中
margin-bottom: 9px;
margin-right: 15px;
}
@media screen and (min-width:300px) and (max-width:320px) and (max-height:480px) {
.button-outer {
bottom: 0;
}
.button {
margin-bottom: 15px;
}
}
这段是针对iphone4做的适配，尽量一屏显示完整。别的手机屏幕大， 一个屏幕可以站下
iphone4屏幕小.占不下
而iphone4和iphone5一样的分辨率宽度,都是320px
所以设置了 @media 里面的 max-width:480px
没有放在开头,会被覆盖,把这一段媒体查询,放在通用默认的底下
后面的覆盖先前的
针对iphone4起作用
使用伪类元素即可实现
下载链接：http://files.cnblogs.com/files/leshao/button.rar
感谢：lost 、蜗牛 ，一棵树