不定宽度的水平居中(修正)

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

例如

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

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

用列表包含起来跟合适些,例如:

?

XML/HTML代码
  1. <ul>??
  2. ????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
  3. ????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
  4. ????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
  5. ????<li?><a?href=“”?title=“”?target=“_blank”>[不定宽度的水平居中]</a></li>??
  6. </ul>??

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

?

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

?

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

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

XML/HTML代码
  1. ol,ul{list-style:none}???? ??
  2. #cha{?background:#00FFFF;?height:50px;?}???? ??
  3. #cha?ul?{???text-align:center;??}???? ??
  4. #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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    呵呵,很不错哦,学习了,谢谢

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

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

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏