未知宽度容器的居中解决方案

Await — Thu, 17 Feb 2011 02:27:36 +0000

如上图所示的分页，其结构如下：

<div class="pagenavi">
<ul>
<li><a href="" title="">1/18a>li>
<li><a href="" title="">上一页a>li>
<li class="current"><a href="" title="">1a>li>
<li><a href="" title="">2a>li>
<li><a href="" title="">3a>li>
<li><a href="" title="">...a>li>
<li><a href="" title="">18a>li>
<li><a href="" title="">下一页a>li>
ul>
div>

在这个结构中，“.pagenavi”是外部框架，100%宽度。而目的，是为了让“.pagenavi”下的“ul”块能够居中显示。可是因为“ul”块中的节点“li”并不固定且为块元素，所以无法确认其父层最终宽度。我们知道一般情况下要让元素居中，直接给宽度和“margin: 0 auto”就行了。但在这里无法确定其宽度，所以这时这种方法就行不通了。

解决方案一：相对浮动

“.pagenavi ul” 向左浮动50%，是以外层“.pagenavi”的宽度为标准的；子节点“li”向右浮动50%，是以层“ul”的宽度为标准的，这里无需定义内层的宽度。这样算是一个小技巧，让“ul”居中了。也补足了float没有center属性的缺陷。

.pagenavi ul{ float: left;
left: 50%;
position: relative;
}
.pagenavi li{
float: left;
position: relative;
right: 50%;
}

解决方案二：display:inline-block

.pagenavi li{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}*/

详细的请点击下面的链接：

未知宽度容器的居中解决方案

2008-11-25 -- CSS清除浮动的一些方法 (6)
CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法： ...
2008-08-21 -- DIV水平居中的方法小结 (0)
我想这个是我们经常遇到的一个问题，当然对很多人来说，这是个很简单，很容易解决的问，在这里我只是把这些常用的方总结下。一、margin:auto 0 与 text-aligh:center 这个方...

DIV水平居中的方法小结

Await — Thu, 21 Aug 2008 12:48:40 +0000

我想这个是我们经常遇到的一个问题，当然对很多人来说，这是个很简单，很容易解决的问，在这里我只是把这些常用的方总结下。
一、margin:auto 0 与 text-aligh:center
这个方法我想是大部分人在用的，也是最简单的。我们先设定marign: 0 auto，即上下边距为0，左右为自动，这样在IE7、Firefox、Opera等浏览器中就能实现居中了。

div#wrap {
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;

但这在IE6中是不起作用的，在IE6中我们得用text-align:center.在IE中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中.现在我们修改下代码如下:

body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
}

二:对wrap进行相对定位，然后使用负边距抵消偏移量。
这种方法我想用的人比较少，但这也是一个简单又有效的方法。
我们设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #666;
background-color:#eee;
}

三、其它的居中方式

body {
padding:10px 150px;
}
div#wrap {
border:1px solid #666;
background-color:#eee;
}

2011-09-24 -- 使用lesscss来编码编写css (12)
lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种：页面添加一个 less.js的文...
2011-02-17 -- 未知宽度容器的居中解决方案 (13)
如上图所示的分页，其结构如下： 1/18 上一页 1 2 3 ... 18 下一页在这个结构中，“.pagena...
2009-11-11 -- 左右两栏等高实现方法 (6)
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...

您可能也喜欢：
解决wordpress分页问题	IE下中英文字体不能对齐原因及解决	CSS 3.0 参考手册 (中文版)	寻找Photoshop笔刷的15个好去处	Opera中国版“朱雀”正式发布
无觅

您可能也喜欢：
Opera中国版“朱雀”正式发布	推荐一个可爱的字体——方正喵呜体	WordPress主题：perfct 1.0	用jquery写一个简单的菜单伸缩效果	功能强大的FLASH Galleryd——dfGallery 2.0
无觅

等待-放飞梦想 » 居中

未知宽度容器的居中解决方案

相关文章

DIV水平居中的方法小结

相关文章