盒模型水平居中

频道:六六互联 日期: 浏览:400

盒模型水平居中

div容器中可以放置任意内容Eg:一段文本,一张图片,一个表格,甚至另一个子容器div等。使用属性text-aligncenter可以设置容器中的内容(包括表格)水平居中,这样的属性针对普通内容,比如文本或图片都是生效的,但是如果容器中放置的子元素仍然还是一个容器,那么单纯地设置text-aligncenter是不会生效的,text-alignleftright亦然。如果也需要水平居中对齐,就需要在div的外面再套一个更大的div容器,让外面的div容器实现水平居中即可。通过案例4-4,example04.html来体验,效果如图4-6所示。

4-4   example04.html      



 

<!DOCTYPE html>

 

<html   lang="en">

 

<head>

 

    <meta  charset="utf-8">

 

    <title>盒子的宽度</title>

 

    <style>

 

    #divouter{ width:  640px; height: 220px;

 

             border:  solid 5px aqua;  margin: 0 auto;}

 

    .divinner{width:  300px; height: 200px;

 

         border: solid  5px red; float: left;margin: 5px; }

 

         </style>

 

</head>

 

<body>

 

         <div  id="divouter">

 

             <div></div>

 

             <div></div>

 

         </div>

 

</body>

 

</html>

 


 

 






4-6 多个盒子模型水平居中

注意

盒子实际宽度(高度)=内容(content+边框(border+间隙(padding+间隔(margin)。对于任何一个元素设置widthheight控制内容大小,也可以分别设置各自的边框(border)、间隙(padding)、间隔(margin)。灵活设置这些盒子的这些属性,可以实现各自排版效果

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距