css居中代码是什么
css居中代码有:1、“vertical-align:middle”;2、“display:flex”;3、给父元素设置“display:table”,子元素设置“display:table-cell”可实现CSS垂直居中等等。
本教程操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。
推荐:css视频教程
通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。因为inline-block可以兼具行内元素和块级元素的特点,能够使得元素有宽度和高度。从而在盒子内能够实现居中
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
给父元素display:table,子元素display:table-cell的方式实现CSS垂直居中,表格也是常用的居中模式,缺点就是会对下面的元素某些样式造成一定的影响,不推荐经常使用这个方式。
先给父元素position:relative,再给子元素position:absolute,通过translateY即可定位到垂直居中的位置。这个是纵轴居中,由CSS3的新特性translate,可以改变元素在纵轴上的偏移。
设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。同样也是纵轴居中。
括展资料:
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
以上就是css居中代码是什么的详细内容,更多请关注其它相关文章!
上一篇: css字体不继承怎么办
推荐阅读
-
如何组织css,写出高质量的css代码_html/css_WEB-ITnose
-
关于10个优化代码的CSS和JavaScript工具的详细介绍
-
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
-
css实现聚光灯效果的代码分享
-
php下载css中图片代码
-
一个简单的动态加载js和css的jquery代码_jquery
-
JQuery+CSS提示框实现思路及代码(纯手工打造)_jquery
-
下面代码 canvas rotate旋转 旋转的坐标点在哪,为什么不在元素的中心点?_html/css_WEB-ITnose
-
使用HTML5/CSS3五步快速制作便签贴特效代码示例分享(图文)
-
div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose