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 、蜗牛 ,一棵树 

icon图标和文字整体居中在button按钮的更多相关文章

  1. 【iOS开发-51】案例学习:动画新写法、删除子视图、视图顺序、延迟方法、button多功能使用方法及icon图标和启动页设置

    案例效果: (1)导入所需的素材,然后用storyboard把上半截位置和大小相对固定的东西布局起来.当然,这些控件也要定义成对应地IBOutlet和IBAction方便兴许使用它们. 注意:本案例在 ...

  2. WPF中给Button加上图标和文字

    要实现在Button里面加入图标或者图形以及文字,我们就需要在Button里面用一个WrapPanel控件,这个WrapPanel控件会把我们的图标或者文字进行包裹,并显示出来. Xaml: < ...

  3. Android实现自定义带文字和图片的Button

    Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...

  4. 【Android】Android实现自定义带文字和图片的Button

    在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最 ...

  5. 自定义两个控件,一个是显示图标和文字的矩形,一个是带边框的label(但是不是label)

    记录遇到的两个坑 坑1. 一开始我继承button 来实现下面的控件1,后面发现button没有双击事件.就改成继承UserControl了.重新编译,导致设计时的控件文本全部被清空,因为UserCo ...

  6. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  7. 【iOS开发-31】UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式

    一.对UITabBar背景和icon图标的一些设置 (1)由于直接给UITabBar设置的背景颜色显示的不纯.半透明的感觉,所以,有时候我们能够直接利用纯色的图片作为背景达到想要的效果. (2)给ic ...

  8. 目标指向、Icon图标的错误

    VS打包后生成快捷方式:目标指向.Icon图标的错误 1.目标指向错误: 在安装***.msi文件后,对快捷方式-->右键-->属性: 发现目标并非指exe文件. 于是我新建了一个快捷方式 ...

  9. VS打包后生成快捷方式:目标指向错误、Icon图标分辨率有误问题解决方案

    1.目标指向错误: 在安装***.msi文件后,对快捷方式-->右键-->属性: 发现目标并非指exe文件. 于是我新建了一个快捷方式,将目标-->指向exe文件,位置Ctrl+v. ...

随机推荐

  1. PHP运算符优先级 运算符分类

    运算符 运算符是可以通过给出的一或多个值(用编程行话来说,表达式)来产生另一个值(因而整个结构成为一个表达式)的东西. 运算符可按照其能接受几个值来分组.一元运算符只能接受一个值,例如 !(逻辑取反运 ...

  2. WINDOWS java 不能正常卸载 问题, (其他系统问题 也可以试试)

    1.JAVA 原安装包无法卸载  不知道 有没有通知 碰到过这种情况的 自己碰到过3次这种情况了,    卸载不掉, 在网上 找了N多中 方法, 注册表什么的都被翻烂了, 单还是没用,其中有一次还把 ...

  3. 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取用户收货信息

    通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机 ...

  4. Linux禁用显示“缓冲调整”

    Linux禁用显示"缓冲调整" youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -o total used free shared ...

  5. springboot+jpa+thymeleaf增删改查的示例(转)

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...

  6. vue2.0---vue-router总结(项目基于vue-cli)

    vue2.0---vue-router总结(项目基于vue-cli) 1. 在项目中安装: npm install vue-router --save 2. 在项目中的引入: // The Vue b ...

  7. do {...} while (0) 在宏定义中的作用

    如果你是一名C程序员,你肯定很熟悉宏,它们非常强大,如果正确使用可以让你的工作事半功倍.然而,如果你在定义宏时很随意没有认真检查,那么它们可能使你发狂,浪费N多时间.在很多的C程序中,你可能会看到许多 ...

  8. Asp.Net Web API(六)

    Asp.Net Web API不可以需要IIS.可以自己在主机上承载一个Web API 创建WebAPI.Server项目 创建一个控制器项目的服务端 在Nuget中添加Microsoft.AspNe ...

  9. DotNetCasClient 如何获取Cas服务器返回的attributes中的数据

    最近开始接触做与其它认证系统的集成,其中有个是与某学校的CAS服务器集成.cas服务器认证成功后返回的数据格式如下: 其中红色部分是我需要取出来用于识别用户身份的数据. 一开始,我根据网上的教程,引用 ...

  10. 挑战App Store,微信通过“跳一跳”秀了一下“小程序”的肌肉

    2017年即将结束的时候,微信放了一个大招.随着最新的微信v6.6.1版本更新,基于小程序的"小游戏"板块正式上线.微信上首发的这款"小游戏"叫"跳一 ...