美文网首页
多元素水平居中

多元素水平居中

作者: love2013 | 来源:发表于2016-07-20 08:53 被阅读33次
万变不离其中,把css掌握了

父元素需要设置text-align:center,来实现子元素作为一个整体在父元素中水平居中。

使用display:inline-block属性,可以使行内元素或块元素能够不加float属性就可以定义自身的宽、高,同时又能使该元素在父元素居中显示。

使用display:inline-block属性,可以使行内元素或块元素能够不加float属性就可以定义自身的宽、高,同时又能使该元素在父元素居中显示。

在内联元素上定义display:inline-block属性,发现IE6、IE7中的显示效果同其它浏览器一致,但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性。

在IE下,display:

inline-block只是触发了元素的layout。比如将display:

inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置

display:

inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-

block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout。

相关文章

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • 所有CSS居中方法,了解一下?

    目录 水平居中内联元素水平居中块级元素水平居中多个块级元素的水平居中 垂直居中内联元素垂直居中单行内联元素多行内联...

  • CSS的水平居中

    水平居中可分为行内元素水平居中和块级元素水平居中** 1.1 行内元素水平居中 这里行内元素是指文本text、图像...

  • CSS相关

    居中 块元素水平居中 行内元素水平居中 模拟表格 实现水平居中display:table ( ) | table-...

  • 网页布局各种居中问题的详解

    水平居中 行内元素水平居中 块级元素水平居中 多个块级元素水平居中 解决方法之一: 解决方法之二: 垂直居中 单行...

  • 水平居中和垂直居中

    水平居中设置--行内元素 水平居中设置--定宽块级元素 水平居中设置--不定宽块状元素 垂直居中--父元素高度确定...

  • 2020-03-05 CSS水平垂直居中学

    1.块级元素水平居中,水平元素垂直居中 CodePen:CSS块级水平居中 2.块级元素垂直居中 CodePen:...

  • CSS水平垂直居中布局

    一、水平居中 (1)行内元素的水平居中 (2)块状元素的水平居中(定宽) (3)块状元素的水平居中(不定定宽) 可...

  • CSS 垂直居中

    一. 水平居中 1. 行内元素水平居中 父元素设置 2. 块级元素水平居中 元素自身加 二. 垂直居中 1. Fl...

  • CSS小技巧

    1.元素水平居中 内联元素水平居中text-align:center; 块元素水平据居中margin:0 auto...

网友评论

      本文标题: 多元素水平居中

      本文链接:https://www.haomeiwen.com/subject/nlxvjttx.html