zoukankan      html  css  js  c++  java
  • css-div下内容垂直居中

    1、多行行文字在固定高度的div中垂直居中,只兼容高级浏览器和移动端

    .detail {
    395px;
    height: 289px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: left;

    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -moz-box-align: left;

    display: -o-box;
    -o-box-orient: vertical;
    -o-box-pack: center;
    -o-box-align: left;

    display: -ms-box;
    -ms-box-orient: vertical;
    -ms-box-pack: center;
    -ms-box-align: left;

    display: box;
    box-orient: vertical;
    box-pack: center;
    box-align: left;
    }

    <div class="pull-left detail">
       <h1 class="show-title">所见即<span>所得</span></h1>
       <p>我用完之后是这个样子,你们用完之后也会是这个样子!-成龙</p>
    </div>

    2、固定高度div中不固定长宽的img垂直水平居中,兼容ie6

     .pic-area .main-pic {
      display: table-cell;
       700px;
      height: 465px;
      line-height: 465px;
      text-align: center;
      vertical-align: middle;

      /* 针对IE的Hack */
      _display: inline;
      *font-size: 405px;/*约为高度的0.873,465*0.873 约为405*/
      *font-family: Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    }

    .pic-area .main-pic img {
    max- 700px;
    max-height: 465px;
    line-height: 465px;
    text-align: center;
    vertical-align: middle;
    zoom:1;
    _ expression((this.width)>=700?"700":"auto");
    _height: expression((this.height)>=465?"465":"auto");
    }

  • 相关阅读:
    多线程案例龟兔赛跑
    不靠谱的事
    生命的价值并不止于自己的幸福
    我的高中搞笑班主任
    AgileChina参会笔记
    上美食
    程序中保留一个Dump
    骗子公司驾到
    我的《野蛮生长》书摘
    最近看的书的清单
  • 原文地址:https://www.cnblogs.com/manchun/p/5140309.html
Copyright © 2011-2022 走看看