脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

css实现移动端图片文字水平居中

  发布时间：2016-03-11 10:18:15   作者：hupan508   我要评论
这篇文章主要为大家详细介绍了css实现移动端图片文字水平居中的方法，如何实现图片以及文字的整体水平居中，本文为大家提供两种解决办法，感兴趣的小伙伴们可以参考一下

这样一个需求，第三方联合登陆的头像和昵称整体水平居中，如图：

对于这样的需求，不能简单的对包含头像和昵称的div使用margin: 0 auto了，因为昵称的长度是未知的。

solution 1：利用行内元素的padding-left属性。把图片绝对定位到padding-left区域内，然后对外层div元素设置文字居中，对span元素设置line-height，让文字垂直居中

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <span class="wrap">  
  3.         <img src="pic-7.png" class="icon" alt="">  
  4.     Username   
  5.     </span>  
  6. </div>  
CSS Code复制内容到剪贴板
  1. .container {   
  2.     height: 10rem;   
  3.     text-align: center;   
  4.     background: #819121;   
  5. }   
  6. .wrap {   
  7.     display: inline-block;   
  8.     position: relative;   
  9.     margin-top: 3rem;   
  10.     padding-left: 3rem;   
  11.     line-height: 2rem;   
  12.     background: #BB9391;   
  13. }   
  14. .icon {   
  15.     position: absolute;   
  16.     left: 0;   
  17.     top: 0;   
  18.     height: 2rem;   
  19. }   

效果图：

 

solution 2：box布局居中，对div元素设置box-pack，span元素设置display: block，由于想偷懒，省略兼容模式写法

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.    <img src="pic-7.png" class="icon" alt="">  
  3.    <span class="username">Username</span>  
  4. /div>  
CSS Code复制内容到剪贴板
  1. .container {   
  2.     display: -webkit-box;   
  3.     -webkit-box-pack: center;   
  4.     height: 10rem;   
  5.     background: #B2B2CD;   
  6. }   
  7. .icon {   
  8.     margin-top: 2rem;   
  9.     height: 2rem;   
  10. }   
  11. .username {   
  12.     display: block;   
  13.     margin-top: 2rem;   
  14.     padding-left: 1rem;   
  15.     line-height: 2rem;   
  16. }   

效果图：

 

点评：solution 1会比较稳定，而solution 2易维护。

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/hupan508/p/5191836.html

相关文章

  • css水平居中的各种方法总结(推荐)

    下面小编就为大家带来一篇css水平居中的各种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-03

  • 浅析CSS实现水平垂直同时居中的5种思路

    下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-04-28

  • CSS实现水平居中的4种思路简要概述

    水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧
    2016-04-27

  • css三种方法实现div在浏览器水平居中

    这篇文章主要介绍了css三种实现div在浏览器水平居中的方法，感兴趣的小伙伴们可以参考一下
    2016-04-14

  • css使用flexbox布局容器内多元素水平居中

    这篇文章主要为大家详细介绍了css使用flexbox布局容器内多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文为大家进行解答，感兴趣的小伙伴们可以参考一下
    2016-03-17

  • 关于css水平居中的小小探讨

    下面小编就为大家带来一篇关于css水平居中的小小探讨。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-29

最新评论

关注微信公众号

扫一扫