不定宽块状元素居中方法
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代码也省略，最终呈现的效果图：
以上是关于不定宽块状元素居中方法的主要内容，如果未能解决你的问题，请参考以下文章