不定宽块状元素居中方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不定宽块状元素居中方法相关的知识,希望对你有一定的参考价值。

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

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

一、设置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代码也省略,最终呈现的效果图:

技术分享  技术分享

 

以上是关于不定宽块状元素居中方法的主要内容,如果未能解决你的问题,请参考以下文章

水平居中总结-不定宽块状元素方法

html+css--水平居中总结(不定宽块状元素方法)

水平居中总结-不定宽块状元素方法

html+css--水平居中总结-不定宽块状元素方法

不定宽 块状元素居中3

水平居中设置-定宽块状元素