点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
上篇已经提到过,前端布局是整个web开发非常重要的一环,也是最基础和最前面的一个环节 。有关居中布局又分垂直和水平方向 。接着上一篇,今天搞一些水平居中的CSS写法 。
一、inline-block和text-align很简单,就是将子元素设置成行内块级元素,这样就成变来处理行内块级元素水平居中的问题 。
将子元素使用inline-block变成行内块级元素,对父框设置text-align就能完整 。如下代码所示:
看起来是下面这样的:
这个方法的好处是:兼容性好,甚至可以兼容ie6 , ie7 。
不好的地方是:当给父元素设置成text-align:center后,其子元素里的文字也会水平居中,这个可以通过设置子元素的text-align来处理 。
二、table和margin原理就是将子元素设置为块级表格形式,然后在处理这种子元素为表格形式的元素的水平居中问题 , 用个margin:0 auto来处理就行 。如下面这段码所示:
效果起来就是这样的:
这个方法的好处的是只要我们设置child就行,ie8之上都支持 。
应该注意的地方是不支持ie低版(可以忽略)
三、absolute和transform和上一篇垂直居中是一样的,父元素先设置成相对定位 , 然后处理子元素在绝对定位下的left值 。原理是一样的 。这里直接看一下我写的DEMO的代码如下所示:
这个方法的好处就是:居中元素不会对其他的产生影响 。
应该注意的地方就是:css3属性的兼容问题 。
效果看起来和上面一致:
四、flex和margin通过将父元素设置成flex后,将所有子元素转换成flex item,在将子元素设置margin属性达到居中 。
【表格文字水平居中怎么设置 表格文字水平居中】这个方法不好的地方同样是低版浏览器兼容性问题 , 需要注意一下 。
效果展示一下:
接下来说一下第五种方法 。
五、flex和justify-content这个方法和上面第四个方法极其相似,只是这两个属性都是设置在父元素上 , 代码如下:
通过CSS3中的布局利器flex中的justify-content属性来达到水平居中 。
比第四个方法相比,好处是只要设置父元素属性就行 。缺点同样是低版本兼容性问题 。
最后总结一下:
搞定水平居中一共写了五种方法 , 各有异同,理解一下,很容易记住 , 学会,常用、常用 。
推荐阅读
- 表格保存不了怎么办,表格保存不了怎么办走兼容
- excel表格如何添加下拉菜单?
- 朋友圈文字怎么设私密,微信朋友圈设成私密文字
- 手机怎么填写docx 手机怎么填写docx表格
- AI软件怎么制作立体文字
- 美篇段落开头文字怎么空格 美篇段落开头文字怎么空格的
- 汽车油量表格的ef是什么意思啊 汽车油量表格的ef是什么意思
- excel工具栏被隐藏 excel表格工具栏隐藏了怎么调出来
- word表格如何计算 word表格如何计算合计
- 微信语音怎么转文字 微信语音怎么转换成文字显示