zoukankan      html  css  js  c++  java
  • 【图片垂直居中】解决方案

    <i class="i"><img src="http://p1.yokacdn.com/pic/index/121/2009/0318/U112P1T121D14F2761DT20100204144100.jpg" /></i>
    .i {display: table-cell;vertical-align:middle; text-align:center;*display: block;*font-size: 175px;*font-family:Arial;200px; height:200px; border: 1px solid #eee; }
    .i img { vertical-align:middle;}


    注意:此种方法,不能对<i>使用 float:left 属性,会导致垂直居中无效!


    注释:
    display: table-cell; —— 非IE的主流浏览器识别的垂直居中的方法
    text-align:center; —— 设置水平居中
    display: block; —— 针对IE的Hack
    font-size: 175px; —— 约为高度的0.873,200*0.873 约为175
    font-family:Arial; —— 防止非utf-8引起的hack失效问题,如gbk编码
    vertical-align:middle; —— 设置图片垂直居中

  • 相关阅读:
    BaseJob
    BaseWorkerForm
    MainForm()
    OperationSystemForm
    Job1
    ExeCuteManager
    ThreadPool
    LogEntry
    java学习阶段一 常量
    java学习阶段一 数据类型
  • 原文地址:https://www.cnblogs.com/enone/p/1782888.html
Copyright © 2011-2022 走看看