蓝鸢梦想

 找回密码
 立即注册

QQ登录

只需一步,快速开始

展开

站内通知     

查看: 298|回复: 0
收起左侧

网页制作技巧:清除浮动和图片水平垂直居中

[复制链接]
  • TA的每日心情
    无聊
    7 天前
  • 签到天数: 123 天

    连续签到: 1 天

    [LV.7]常住居民III

    Lanyuan 发表于 2016-11-24 16:04:06 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    1、如何清除浮动

    方法1:

    #test{clear:both;}

    #test为浮动元素的下一个兄弟元素

    方法2:

    #test{display:block;zoom:1;overflow:hidden;}

    #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

    方法3:

    #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

    #test为浮动元素的父元素

    2、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

    #test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;} #test p{*position:absolute;*top:50%;*left:50%;margin:0;} #test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

    #test是img的祖父节点,p是img的父节点。







    上一篇:web设计和设计流程有趣的web交互设计
    下一篇:用CSS实现动态显示的五角星级效果
    蓝鸢梦想,属于我们的天空之城~

    快速回复 返回顶部 返回列表