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

最新推荐文章于 2023-01-15 10:45:51 发布

吖肥

最新推荐文章于 2023-01-15 10:45:51 发布

阅读量2.1k

点赞数

分类专栏： div居中 CSS 文章标签： div stylesheet class border generator xhtml

div居中同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

<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>

在这个结构中，“.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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="utf-8" />
	<title> new document </title>
	<meta name="robots" content="all" />
	<meta name="generator" content="editplus" />
	<meta name="author" content="hayden@yeah.net,hayden" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" rev="stylesheet" href="" type="text/css" media="all" />
	<script type="text/javascript" src=""></script>
	<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;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}
.page span.totlerecord{}
.page span.current{cursor:pointer;}
.page a:link,.page a:visited {border: 1px solid #ccc;display: inline;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>

转载于 http://www.mysuc.com/article/DIV&CSS/kuandu-DIV-float-fudong-juzhong.htm

吖肥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div宽度100%，内部元素浮动，div居中

5 1/5 1 2 3 4 5 > 在这个结构中，“.pagelist_b”是外部框架，100%宽度。而目的，是为了让“.page”块能够居中显示。可是因为“.page”块中的节点并不固定，无法确认其最终宽度，再者，“.page”块中的内容需要定义特殊的样式，而被附上“disp
复制链接

扫一扫