不定宽块状元素居中方法

　　在实际的编写代码过程中，我们会遇到要为“不定宽块状元素”设置居中，比如网页上的分页导航，因为分页的数量不确定，所以我们不能通过设置宽度来限制它的弹性。

不定宽的块状元素有三种方法设置居中：

一、设置table标签：

　　利用table标签的自适应长度（table其长度根据其文本内容的长度决定），因此可以看做是“定宽度块元素”，然后利用顶宽度块状元素居中的margin方法，使其水平居中。

　　例1：HTML代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>例1</title>
 6 <link type="text/css" rel="stylesheet" href="task3-4.css">
 7 <script type="text/javascript" src="task3-4.js"> </script>
 8 </head>
 9 <body>
10     <table>
11             <tbody><tr><td>
12                   <div class="parent">
13                       <div id="page"></div>
14                   </div>
15              </td></tr></tbody>
16       </table>
17 </body>
18 </html>

　　CSS代码：（其余代码已省略，只有核心代码）

 1 table { 2 border: 0; 3 margin: 0 auto; 4 } 

　　JavaScript代码也省略，最终呈现的效果图：

  

　　分页码始终在白色背景块中居中，无论有多少个分页效果；

二、将块级元素的display属性设置为inline类型（设置为行内元素）

　　设置块级元素的display属性为inline类型，然后父级使用text-align:center来实现居中。

　　例2：HTML代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>例1</title>
 6 <link type="text/css" rel="stylesheet" href="task3-4.css">
 7 <script type="text/javascript" src="task3-4.js"> </script>
 8 </head>
 9 <body>
10       <div class="parent">
11             <div id="page"></div>
12       </div>
13 </body>
14 </html>

　　CSS代码：（其余代码已省略，只有核心代码）

1 .parent {
2     text-align: center;  
3 }
4 #page {
5     display: inline; 
6 }

　　JavaScript代码也省略，最终呈现的效果图：

  

 

三、设置父元素float：

　　设置父元素为float:left; position:relative; left:50%;设置子元素float:left; left:-50%;

　　例3：HTML代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>例1</title>
 6 <link type="text/css" rel="stylesheet" href="task3-4.css">
 7 <script type="text/javascript" src="task3-4.js"> </script>
 8 </head>
 9 <body>
10       <div class="parent">
11              <div id="page"></div>
12       </div>
13 </body>
14 </html>

　　CSS代码：（其余代码已省略，只有核心代码）

 1 .parent {
 2     float: left;  
 3     position: relative; 
 4     left: 50%; 
 5 }
 6 #page {
 7     position: relative; 
 8     margin: 0px; 
 9     padding: 0px;  
10     left: -50%;  
11 }

 

 

　　JavaScript代码也省略，最终呈现的效果图：

  

 

posted @ 2017-06-08 21:19  yuequanling  阅读(1185)  评论(0)  编辑  收藏  举报