css居中解决方案及思考
来源:互联网 发布:韩都衣舍淘宝 编辑:程序博客网 时间:2024/06/10 19:13
这段时间在做百度前端技术学院的任务,自己总结了许多细节方面的改进和体会,css中主要分为两部分:一是如何利用css进行布局,具体内容请看我上一篇博客《css布局总结》;二就是如何解决css居中布局。
简单来说,css布局有以下三个方案:
(一)text-align和vertical-align
对父元素设置text-align: center或vertical-align: middle,只对子元素为内联元素时才起作用。text-align: center水平居中,这条语句很好理解,也经常用到,如实现段落居中;vertical-align: middle垂直居中就存在很多坑了,有时候想用这条语句实现简单的垂直居中,就是实现不了emoticon。那是为什么呢?我们都知道display有三种不同的属性:inline、inline-block和block,就好像物质的三种状态:液态、固液混合和固态,只有一个元素属于inline、inline-block或block时其自身的vertical-align属性才起作用。不建议使用这个属性,因为搞不好就会发狂,但是在做图片垂直居中的时候还是蛮喜欢它的,哈哈!
<a href="" class="header__nav__link"> <img src="./images/login-icon.png" alt="" class="header__icon"> 登录</a>
.header__icon{ vertical-align: text-bottom;}
(二)万能的position
利用position属性可实现水平居中和垂直居中,精髓在于transform: translate(),具体案例如下:
<div class="container"> <div class="container__left"></div> <div class="container__right"></div></div>
.container{ position: absolute; width: 400px; height: 200px; top:50%; left: 50%; transform: translate(-50%,-50%);}
.container{ position: absolute; width: 400px; height: 200px; top:0; bottom: 0; left: 0; right:0; margin: auto;}
在父元素上设置position: relative属性,若不设置则以根目录为参照物,这里把.container设置为position: absolute;就是将body作为参照物,方案一在子元素上设置 position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%),top和left是以参照物的宽高作百分比,transform: translate()中的百分比则以自身宽高为参照物。方案二应用的非常巧妙,简单直接,不过需要注意的是需要设置height,否则margin:auto;无效,若不设置height,程序不会给出预设值,因为区域高度是随内容高度变化的,所以margin:auto 0不会自动平分margin-top和margin-bottom。
(三)神奇的flex
利用flex做居中问题是山重水复疑无路的一种办法,flex很优雅,也很绅士,就像是看到柳暗花明一样。
只需要在父元素上设置display: flex;justify-content: center;align-items: center;即可实现水平垂直居中,是不是简单又暴力emoticon,但是其兼容性不好,所以在前面几个方案无法实现的前提下再考虑用它。
- css居中解决方案及思考
- 关于CSS中的居中问题的思考及解决方案
- CSS居中解决方案
- CSS垂直居中解决方案
- css中元素居中显示的常见问题及解决方案
- CSS水平居中和垂直居中解决方案
- CSS居中及布局
- CSS文本垂直居中解决方案
- css 解决方案-图片垂直居中
- CSS居中问题终极解决方案
- CSS水平居中布局解决方案
- CSS垂直居中布局解决方案
- div+css 水平居中和垂直居中的多种解决方案
- CSS水平居中和垂直居中解决方案(转)
- CSS水平居中和垂直居中解决方案(转)
- CSS水平居中元素方法及反思
- css遮罩层及遮罩层gif图片居中
- CSS外边距及盒子居中对齐
- caffe单步调试
- php发送post请求的三种方法
- 一头扎进springboot之使用Freemarker模板引擎渲染web视图
- Django QuerySet API
- Mysql read lock and write lock
- css居中解决方案及思考
- Flask回掉接入点简单实现静态页面缓存
- 关于进行安装程序出现注册DLL/OCX失败,返回码:0x5问题
- 关于修改select样式的方法
- RabbitMq、ActiveMq、ZeroMq、kafka之间的比较
- 设计模式 -- 单例模式
- 从机器学习算法的发展 理解 端到端(end to end)学习
- qcom 显示驱动注册流程
- Tensorflow--useful function