div宽度100%,内部元素浮动,div居中

<!DOCTYPE>   

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<meta http-equiv="Content-Language" content="utf-8" />  

<title> new document </title>   



</head>  

<body>  

<div class="pagelist_b">  

<div class="page">  

<span class="totlerecord">5</span>  

<span class="totlepages">1/5</span>  

<span class="current">1</span>  

<a href="#">2</a>  

<a href="#">3</a>  

<a href="#">4</a>  

<a href="#">5</a>  

<a href="#">></a>  

</div>  

</div>  

</body>  

</html>

在这个结构中,“.pagelist_b”是外部框架,100%宽度。而目的,是为了让“.page”块能够居中显示。可是因为“.page”块中的节点并不固定,无法确认其最终宽度,再者,“.page”块中的内容需要定义特殊的样式,而被附上“display:block;”属于将其块元素化,而导致“.page”中的内容无法完美的居中。

这两天突然无意中看到网上的相关文章,想起了position:relative;(相对浮动)的玩法。大致非常通俗的说明一下这里的思路:“.page”向右浮动50%,是以外层“.pagelist_b”的宽度为标准的;内层(如A,SPAN)向左浮动50%,是以层“.page”的宽度为标准的,这里无需定义内层的宽度。这样算是一个小技巧,让“.page”居中了。也补足了float没有center属性的缺陷。如果无法正常显示,记得在page_b加多一句overflow:visible;

<!DOCTYPE>   

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<meta http-equiv="Content-Language" content="utf-8" />  

<title> new document </title>   

<style type="text/css">  

* { word-wrap: break-word; margin: 0; padding: 0;}  

.pagelist_b {width:100%;height:80px;text-align: center; }  

.page {position:relative;left:50%;float:left;}  

.page span {position:relative;left:-50%;border: 1px solid #ddd;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}  

.page span.current{cursor:pointer;}  

.page a:link,.page a:visited {border: 1px solid #ccc;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;text-decoration: none;position:relative;left:-50%;color:#666}  

.page a:hover {border:1px solid #666;}  

</style>  

</head>  

<body>  

<div class="pagelist_b">  

<div class="page">  

<span class="totlerecord">5</span>  

<span class="totlepages">1/5</span>  

<span class="current">1</span>  

<a href="#">2</a>  

<a href="#">3</a>  

<a href="#">4</a>  

<a href="#">5</a>  

<a href="#">></a>  

</div>  

</div>  

</body>  

</html>

 

你可能感兴趣的:(div居中)