注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浮游生物的博客

以扯蛋的态度面对操蛋的人生

 
 
 

日志

 
 

未知宽度水平居中的几种方法  

2014-02-28 16:22:01|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在某些特定的场合,在没有知道宽度的情况下却要求水平居中,今找到些解决方法,现转过来一起学习学习未知宽度水平居中的几种方法

方案一、利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”

.unknow_width_center1 {position:relative; left:50%; float:left;}
.unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left}
<ul class="unknow_width_center1">
    <li><a href="#">1</a></li>
    
<li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    
<li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>

通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。

可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。缺点是设置了position:relative;带来了一些副作用,并且需要闭合(清除)浮动。

方案二、利用text-align属性特性(text-align:center 对于ie6、7块级和内联级都可以水平居中。其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。 )强制定义为内联 display:inline

.unknow_width_center2 {text-align:center; padding:5px;} .unknow_width_center2 li {display:inline;}<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>

将子元素设置为内联居中,那么大家都知道的display:inline内联元素宽高是不可以设定的,局限性太大,不宜使用。

方案三、利用table的属性特性

.unknow_width_center3{margin:0 auto}
 
.unknow_width_center3 ul {overflow:hidden; *zoom:1} 
.unknow_width_center3 ul li {float:left;}
<table class="unknow_width_center3">
<tr> <td><ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li><li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul></td> </tr> </table>

是使用table作为容器的方法来实现。添加了无意义的标签。Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度 是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。(我就喜欢用这种方法,加个表头就行了,切记一定要加tr、td才有效哦)

方案四、利用内联块display:inline-block的text-align属性

.unknow_width_center4 {text-align:center} .unknow_width_center4 ul li {display:inline-block;*display:inline; *zoom:1;} <ul class="unknow_width_center4 "><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>

IE6/7下直接设置display:inline-block的居中无效,这里在IE6/7下设置了display:inline,神奇的是竟然 可以设置宽高及其垂直方向的内外边距。缺点是display:inline-block会引起一些间隙,当然有看起来碍眼解决方案。

  评论这张
 
阅读(460)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018