icon图标和文字整体居中在button按钮

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起作用 

使用伪类元素即可实现

 

下载链接：https://files.cnblogs.com/files/leshao/button.rar

感谢：lost 、蜗牛 ，一棵树