css完成挪动端照片文本水平垂直居中

日期:2020-09-21 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

这样1个要求,第3方协同登录的头像和昵称总体水平垂直居中,如图:

针对这样的要求,不可以简易的对包括头像和昵称的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⑺.png" class="icon" alt="">  
  4.     Username   
  5.     </span>  
  6. </div>  
CSS Code拷贝內容到剪贴板
  1. .container {   
  2.     height: 10rem;   
  3.     text-aligncenter;   
  4.     background#819121;   
  5. }   
  6. .wrap {   
  7.     displayinline-block;   
  8.     positionrelative;   
  9.     margin-top: 3rem;   
  10.     padding-left: 3rem;   
  11.     line-height: 2rem;   
  12.     background#BB9391;   
  13. }   
  14. .icon {   
  15.     positionabsolute;   
  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⑺.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.     displayblock;   
  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