不定宽块状元素居中方法
在实际的编写代码过程中,我们会遇到要为“不定宽块状元素”设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性。
不定宽的块状元素有三种方法设置居中:
一、设置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代码也省略,最终呈现的效果图: