不定宽度的水平居中（修正）

2009-03-26 分类：HTML+CSS 阅读(12200) 评论(1)

文字水平居中我们一般用text-align:center;

例如

XML/HTML代码

<div?style=“?text-align:center”><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></div>??
??

但是个人认为这不符合HTML语义

用列表包含起来跟合适些，例如：

?

XML/HTML代码

<ul>??
????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
</ul>??

那怎么实现呢，原理我也说不清楚，直接看代码吧：

?

CSS代码

ol,ul{list-style:none} ??
#cha{?background:#00FFFF;?height:50px;?position:relative} ??
#cha?ul?{?position:absolute;?top:19px;left:50%;??text-align:center;??} ??
#cha?li{? display:inline;?padding:0?8px;??left:-50%;position😕relative;}??

?

=======================================================

码头是傻了；其实样式这么写就可以了

XML/HTML代码

ol,ul{list-style:none}???? ??
#cha{?background:#00FFFF;?height:50px;?}???? ??
#cha?ul?{???text-align:center;??}???? ??
#cha?li{??display:inline;?padding:0?8px;}??? ??

?原文地址：http://www.9demo.com/article/8.htm

演示地址：http://www.9demo.com/demo/Horizontal Center/Horizontal Center.html

赞(0) 打赏

未经允许不得转载：WEB前端开发 » 不定宽度的水平居中（修正）

相关推荐

评论 1

#-49
呵呵，很不错哦，学习了，谢谢

叨叨客7年前 (2011-12-07)回复

前端开发相关广告投放更专业更精准