一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

css 中float后text-align无效解决办法

时间:2013-07-05 编辑:简简单单 来源:一聚教程网

般写内容居中的时候都会使用text-align:center属性,但是内元素一旦float起来的时候,text-align就会失效。
我们只能其他的方法来达到居中的目的

 代码如下 复制代码




 
 float居中的最佳实践
 


 


  

float居中的最佳实践


  

       
  • 宽度一

  •    
  • 宽度二二二

  •    

  •    
  • 来一张图片

  •   

 


本方案主要是利用父层ul的float:left+left:50%,配合子层li的float:left+right:50%(left:-50%)来达到目的的。
html代码如下:

 代码如下 复制代码


     
  • 宽度一

  •  
  • 宽度二二二

  •  

  •  
  • 来一张图片

css代码如下:

 代码如下 复制代码

.sl-float-middle{position:relative; left:50%; float:left;}
.sl-float-middle-cell{position:relative; float:left; right:50%;}

热门栏目