搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-14 18:47:23 来源：互联网
.
在小溪的淙淙声中，饱含树脂的幼芽在开放，水下的草长出水面，岸上青草越发繁茂。雨滴从屋檐、墙头、树叶上跌下，就如同断了线的珠子一样，最后连在一起，形成水柱。

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <spanclass="wrap">
  3. <imgsrc="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. <divclass="container">
  2. <imgsrc="pic-7.png"class="icon"alt="">
  3. <spanclass="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
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图