通过定位来实现不定宽度居中显示

(编辑:jimmy 日期: 2025/1/9 浏览:2)

在制作中内容居中通常方法是给容器width固定宽度,然后text-align:center;margin:0 auto;或者将块装换成内联元素display:inline,然后text-align:center就能实现居中效果了。

下面这个方法是通过定位来实现的效果:

CSS代码:

复制代码代码如下:
<style>
*{ padding:0; margin:0; list-style:none;}
.sjbest ul { float:left; position:relative; left:50%;}
.sjbest ul li { float:left;position:relative; right:50%; padding:6px; }
</style>

HTML代码:

复制代码代码如下:
<div class="sjbest">
<ul>
<li><a href="#">分类一</a></li>
<li><a href="#">分类二</a></li>
<li><a href="#">分类三-设计邦</a></li>
</ul>
</div>

首先,ul设置左浮动是为了 使得ul的宽度不是100%,而是 几个li宽度的总和。 之后ul相对定位 使用left把ul移动到剧中位置。

这个使用 li的起始位置在居中的50%的地方,所以需要把li 向左边移动50%。 这里想问题的时候要注意,position:relative所定义的移动百分比不是相对于自身的,而是相对于父元素的。也就是说 li 50% 实际上计算出来的宽度 是 ul宽度的一半,而不是li的。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。