首页 > Web开发 > 详细

css之多行居中

时间:2019-11-21 18:00:25      阅读:75      评论:0      收藏:0      [点我收藏+]

需求: 单行到多行文字居中。

<div>
     <p>应该为数组中的每个子代分配一个唯一的键。表格dataSource和中的值columns应遵循此规则。默认情况下</p>
</div> 

1.定位:

div{
    height: 120px;
    position: relative;
 }

p{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

2.flex

div{
    width: 600px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
ps:width,height只是举个例子,剩下的三个属性是必要的,子盒子不行要加额外的属性

3.inline-block+vertical-align

div{
line-height:120px;
}
p{
line-height: 24px;
    display: inline-block;
    vertical-align: middle;
}
ps:父盒子必须有line-height,vertical-align会依靠它来居中

 

 

css之多行居中

原文:https://www.cnblogs.com/superjsman/p/11906887.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!