1. 爱易网页
  2. CSS教程
  3. CSS box-align: center完成子框架居中

CSS box-align: center完成子框架居中

日期：2013-12-18　 浏览次数：20964 次

网页制造aiyiweb文章简介：CSS 多个子框架居中.

有时我们需求令一个宽度固定的容器里的子框架居中（例如一个 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
                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        CSS教程:-moz-inline-box和-moz-inline-stack
    2. 
                   
                
                  
    
                      
  2. 
                        CSS教程之内容设置的一些语法
    3. 
                   
                
                  
    
                      
  3. 
                        完成用CSS高效率停止网页编码的方法
    4. 
                   
                
                  
    
                      
  4. 
                        DIV CSS制造网页时浮动效果的处置方法
    5. 
                   
                
                  
    
                      
  5. 
                        表格边框的css语法整理
    6. 
                   
                
                  
    
                      
  6. 
                        用CSS制造隐藏菜单
    7. 
                   
                
                  
    
                      
  7. 
                        CSS{position:fixed}让HTML固定在阅读器的某个位置
    8. 
                   
                
                  
    
                      
  8. 
                        应用CSS控制背景图片
    9. 
                   
                
                  
    
                      
  9. 
                        简化网页 优化WEB运用的方法
    10.