垂直居中vertical-align: middle失效的原因:因相对于左侧居中

    类别:Css知识  贡献者:admin  总点击:3882  受欢迎度:10  更新日期:2016年06月19日
简介:vertical-align: middle失效的原因:原来并非失效,是相对于左侧居中,给左边一个填满div的图片,就可以实现垂直居中了。.
  • vertical-align: middle失效的原因:原来是相对于左侧居中

    div水平居中很容易,设置css样式 text-align: center;  就可以了。

    垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

    第一种方法:通过一个空白图片可以达到垂直居中的效果。

    代码如下 复制代码 

    《html》
     《title》图片居中《/title》
     《style》
    /*定义垂直居中*/
    #test * {
     margin: 0px;
     padding: 0px;
     vertical-align: middle;
    }

    /*定义div大小,以及水平居中*/
    #test {
     background: #fff000;
    width: 500px;
    height: 500px;
     text-align: center;
    }

    /*辅助图片高度填满div,宽度为0,所以看不到这个图片*/
    #img {
    width: 0px;
    height: 100%;
    }
    《/style》
     《body》
      《div id="test"》
      《!--辅助图片 --》
       《img alt="" src="" id="img"》
       《!--要居中的图片 --》
        《img alt="" src="skin/images/top/logo.jpg"》
       《/div》
     《/body》
    《/html》

    个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。

    第二种方法:往div里面加表格。

    代码如下 复制代码 
    《html》
        《style》
    #a {
        background: #fff000;
        width: 500px;
        height: 500px;
        overflow: hidden;
        text-align: center;
    }
    《/style》
        《body》
            《div id="a"》
                《table width="100%" height="100%"》
                    《tr》
                        《td align="center"》
                            《img src="skin/images/top/logo.jpg" /》
                        《/td》
                    《/tr》
                《/table》
            《/div》
        《/body》
    《/html》  

    在表格里就很容易设置居中了。

    经测试,这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。

    另外,说一下overflow: hidden; 这个属性,当图片大小超出div的大小时,会影藏超出的部分。不设置的话,图片会全部显示,覆盖在div上。

    做网页(zuowangye.com)

    补充本知识点暨快乐评论此文章:'垂直居中vertical-align: middle失效的原因:因相对于左侧居中.'

文章标签:垂直居中 css知识 
踩下去0
顶上来0
复制本页网址,与你QQ/MSN上的好友分享  温馨提示:如果您喜欢本站,请把她推荐给您的朋友们!
现在有0人对本文发表评论。  »马上发布评论
现在有0人对本文发表评论。  »查看所有评论
您的姓名: * 可选项,留空即为匿名发表
评论内容:
剩余字数:  * 按 Ctrl + Enter 直接发送.
           »»我要分享做网页知识
相关文章推荐
合作伙伴: 百度站长平台 新浪读书频道 CSDN.Net YPState R灯具集 好搜站长平台 商录 全球网站推广库 搜狗站长平台 网页百科 更多» >>加入本站作者团
首页 | 关于我们 | 网站地图 | 合作伙伴 | 部分作者 | 会员注册 友情链接 | 联系方式 |
2004-2019 做网页学习网 鄂公网安备 42010402000280号 鄂ICP备13003030号