浅谈position、table-cell、flex-box三种垂直(…
2018-06-24 01:40:02来源:未知 阅读 ()
一、首先是喜闻乐见的position方法,经典且万能,用法如下:
1 父元素{ 2 position:relative; 3 } 4 子元素{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 margin-top:/*该元素height*0.5的负值*/; 9 margin-left:/*该元素width*0.5的负值*/; 10 }
不需要水平居中可以去掉left和margin-left。
划重点:需要父元素和子元素都定义宽高,自适应是不可能自适应的,这辈子都不可能自适应的。
二、 display:table-cell能够使大小不固定的元素实现垂直居中布局,先来一发用法:
父元素{
display:table-cell;
vertical-align:middle;
}
子元素{
vertical-align:middle;
}
table-cell布局除了常见的实现不同宽高的图片垂直居中,还能做到自适应两栏布局(评论区等):
代码如下:
HTML部分:
<div class="wrap"> <div class="img"> <img src="http://img5.imgtn.bdimg.com/it/u=416202619,4025660570&fm=26&gp=0.jpg" width="80px" height="80px" alt=""> </div> <div class="text"> <p>文字部分 </p> </div> </div>
CSS部分:
<style type="text/css"> .wrap{ display: table-row; } .img{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; border: 1px solid #000; } .text{ display: table-cell; width: 300px; border: 1px solid #000; padding: 10px; } .wrap div+div{ border-left: none; } </style>
另外table-cell还能自动使多个子元素等宽分布,不需要自己计算宽度:
代码如下:
ul{ list-style-type:none; display: table; width: 250px; padding: 0; } li{ display: table-cell; text-align: center; } li+li{ border-left: 1px solid #000; }
划重点:1、IE6/7不支持; 2、table-cell不支持margin属性(但支持padding),就很僵硬; 3、尽量不要和浮动/定位同时用,会破坏它的css属性。
三、如果你用ie我们就做不成朋友之弹性布局神器flex-box,用法如下:
父元素{ display:flex /* 行内元素用inline-flex */ align-items:center;/*当主轴为水平方向(默认)*/ }
原理是使flex-box的子元素(伸缩项目)沿着侧轴方向(当默认flex-direction:row时,侧轴就是垂直方向)居中对齐。
使用flex-wrap,还可以使伸缩容器里的内容折叠显示:
当调整视口宽度缩小到480px时:
代码如下:
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} #box{ display: flex; flex-wrap: wrap; justify-content:center;/* 主轴方向居中对齐*/ align-items: center;/* 侧轴方向居中对齐*/ padding: 50px; font-size: 2.5em; font-weight: bold; text-align: center; border: 1px solid #000; } </style> </head> <body> <div id="box"> <p class="item1">超好吃的</p> <p class="item2">?</p> <p class="item3">麻辣小龙虾</p> </div> </body>
浏览器兼容情况:
低版本浏览器兼容性解决:
display: -moz-box; /* 低版本firefox */
display:-webkit-box;/* IOS 6-,safari 3.1-6 */
------
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* 较低版本firefox */
display: flex; /*IE11, Chrome29+, FireFox 20+ */
参考:
兼容:
https://zhuanlan.zhihu.com/p/21640023
http://www.cnblogs.com/iriszhang/p/6102524.html
flex-box的兼容性bug解决:
http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Web前端基础——CSS
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- position定位,CSS入门必备, 好像以后有个更厉害的flex! 2020-03-07
- position属性值4缺一带你了解相对还是绝对抑或是固定定位 2020-02-15
- position定位及实际应用 2020-01-31
- css position:sticky的尝试 2019-12-08
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash