zoukankan      html  css  js  c++  java
  • table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY>
    <h1>未知宽高的图片水平垂直居中在div</h1>
    <!--box-outer-->
    <div class="box-outer">
    <div class="box">
    <img src="images/01.jpg" />
    </div>
    </div>
    <!--box-outer-->
    <h1>多行文本平垂直居中在div</h1>
    <!--box-outer-->
    <div class="box-outer">
    <div class="box">
    <p>123456</p>
    <p>123456</p>
    <p>123456</p>
    <p>123456</p>
    </div>
    </div>
    <!--box-outer-->
    </BODY>

    =============================

    h1{
    text-align: center;
    margin:30px auto;
    }
    .box-outer{
    400px;
    height: 400px;
    margin: 30px auto;
    }
    .box {
    400px;
    height: 400px;
    border: 1px #000 dashed;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    *display: block;
    *font-size: 175px;
    /*约为高度的0.873,200*0.873 约为175*/

    *font-family: Arial;
    /*防止非utf-8引起的hack失效问题,如gbk编码*/
    }
    .box img {
    vertical-align: middle;
    }

    可惜使用table-cell不兼容ie6.使用table-cell了,margin不起作用,可以外嵌套一层div

    作为工作备忘录而已!
  • 相关阅读:
    常用查找算法总结
    cout<<endl 本质探索
    C语言字符串操作函数实现
    Shell编程实例
    Linux搭建SVN服务器
    Linux下搭建gtk+2.0开发环境
    Cairo编程
    DirectFB编程
    Ubuntu安装与配置
    Android学习之仿QQ側滑功能的实现
  • 原文地址:https://www.cnblogs.com/leshao/p/4651523.html
Copyright © 2011-2022 走看看