建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS多个子框架居中

更新时间:2016-12-23整理编辑:建站学习网阅读:0

有时我们需要令一个宽度固定的容器里的子框架居中(例如一个Div ,或者其他block级元素),如果子框架只有一个的话,我们只需要为子框架加上CSS属性margin:auto就可以了。

但如果我们要让多个子框架居中,并且等分父框架剩余的空间的话,我们对所有子框架使用CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持box-align属性,那么我们应该如何编写CSS,使这种效果能兼容大部分的浏览器呢?

通常的方法

为了使多个block级元素排列在同一行里,我们习惯使用float 属性使子框架浮动,然后利用margin属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的IE6双倍margin BUG,这样反而要投入额外的时间去调试IE6 的Hack。

虽然我们还可以通过display: inline来避开IE6的BUG,但我们仍然需要调整这些子框架间的间距,防止最后一个自框架被挤到下一行。

改变子框架级别并且控制剩余的空白

使用float和margin来让多个子框架居中并且等分父框架剩余空间的做法缺点很多。为了避开这些缺点,我们还可以使用另一种方法:把子框架的级别改为inline-block ,并且通过letter-spacing属性 控制自框架之间的间距。

假设在一个父框架里有四个block级的子容器,每个子容器的大小均为100px x 100px。为了让这些子框架能排列在同一行内,我们可以把它们改为 inline-block 级,由于子框架和父框架之间并没有其它的内容,应此要控制子框架的空间分配将易如反掌。姑且假设父框架id=parent,子框架class=child,那么CSS可以这样写:

以下为引用的内容:

#parent {width: 615px;border: solid 1px #aaa;text-align: center;font-size: 20px;letter-spacing: 35px;whitewhite-space: nowrap;line-height: 12px;overflow: hidden;}.child {width: 100px;height: 100px;border: solid 1px #ccc;display: inline-block;vertical-align: middle;}

在这段样式里,#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 这些属性是实现预想效果的关键,下面解释一下这些属性起了什么作用。

text-align:使 #parent里的所有内容都居中

letter-spacing:控制每个子框架之间的空白大小

white-space:nowrap:防止最后一个子框架被挤到下一行

overflow:hidden:隐藏超出 #parent 范围的内容

vertical-align:middle:使所有子框架都垂直居中

display:inline-block:是所有子框架都排列在同一行,并且保持 block 级元素的特性

兼容IE

在今时今日,老版本的IE浏览器已经成为网页设计师的心头大恨,虽然上面的CSS能兼容IE8,但由于IE6和IE7并不完全支持inline-block 级元素,因此我们还需要写下面的一段Hack,确保在IE6 和IE7里能保持和现代浏览器一致的效果。

以下为引用的内容:

.child {*display: inline;*margin: 0 20px 0 20px;}

本文所举例子的最终效果可以看这个DEMO。

后记

本文所举的例子虽然只有短短的两句IE Hack,但在实际开发中大家要写的Hack肯定要多很多,因此淘汰老版本 IE 的任务已经刻不容缓。我听过很多人说:“我不用 IE 浏览器的,我用傲游和世界之窗“,在这里我提醒一下大家,对这些无法解释清楚的人,我们可以简单地和他们说:“凡是能用支付宝的浏览器都是落后的,请放弃使用。“。

本文网址:https://www.dedexuexi.com/divcss/jc/1412.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
让CSS更简洁、高效
« 上一篇2016年12月23日
如何改变网站模板调用的CSS文件换肤
2016年12月23日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content