如何用float配合position:relative实现居中
2013-09-05 17:30
357 查看
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,于是去请教同事,发现还有一种更好的解决办法。
html代码如下:
关于position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或者left:-50%),那么li就像向中间浮动一样居中了。
html代码如下:
<div class="favViewicon "> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
关于position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或者left:-50%),那么li就像向中间浮动一样居中了。
.favViewicon{ text-align:center; position:relative; overflow:hidden; margin:15px auto 0; height:10px;} .favViewicon ul{ position:relative; float:left; left:50%; text-align:center;} .favViewicon li{ width:10px; height:10px; background:url(btnsprites.png) no-repeat 0 -164px; margin:0 3px; cursor:pointer; text-indent:-99999px; position:relative;right:50%;float:left; display:inline; }
相关文章推荐
- 用position:relative和float实现不定宽块级元素的居中
- 利用ul,li,span,position:relative实现文本的居中显示
- position为absolute的元素如何实现居中
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- 如何实现标签自适应居中
- HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))
- position:fixed div如何居中最佳解决方案
- 运用CSS实现float:center 居中浮动li
- webBasic_day04_CSS_overflow_display_float_position(absolute, relative)
- Universal-Image-loader 部分源码讲解 及 如何 配合阿里云 实现图片缓存。
- Engine中如何实现先居中显示要素再闪烁
- translate+position实现居中
- css position:absolute 如何居中对齐
- float:left的对象(导航)如何居中示例探讨
- float,position,relative,absolute,文档流这些关键术语解惑
- [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中
- Delphi7如何实现让Tedit显示文字垂直居中(上下居中)
- python 7-1 如何派生内置不可变类型(int,str,tuple,float)并修改实例化行为,继承内置tuple并实现__new__
- 如何实现未知高居垂直居中?_div+css布局教程