zoukankan      html  css  js  c++  java
  • 图片垂直居中

    图生垂直居中有多种方法:

    1.图片宽度,高度都小于外面框的宽和高度,不知图片(宽和高)

    .xh_b{

           display:table-cell;

           vertical-align:middle;

          //上面两条主要是为了不是IE6浏览器

          *font-size:200*0.873px;

          *display:block;

          *font-family:Arial;

           //防止别的编码,GBK;

          text-align:center;

          200px;

          height:200px;

    }

    .xh_b1 img{vertical-align:middle;//主要是为了IE6}

    2.图片宽度,高度都小于外面框的宽和高度,(知道图片宽和高)

    .xh_b1 img{position:absolute;top:50%;left:50%;margin-top:-height/2+'px';margin-left:-width/2+'px'}

    3.关于水平居中问题

    text-align:center;是让文本居中对齐的,但在IE6中对div块级元素使用text-align:center;也能让块级元素居中对齐

    margin:0 auto;200px;是块级元素居中对齐的例:p,div,ul....

    但是有个特殊的元素,iframe元素,此元素应该是块级元素,对此元素使用margin:0 auto;200px;不能让此iframe居中对齐,只能对他的父元素使用text-align:center;才能让他居中对齐,把它理解成了文本元素

  • 相关阅读:
    临时文件服务器,配置共享文件夹
    封装扩展方法
    List.Insert
    VS 生成事件中xcopy失败
    创建型设计模式总结
    js提交图片转换为base64
    C#建造者模式
    echarts 立体柱
    k8s生产环境启用防火墙,要开启的端口
    一篇文章为你图解Kubernetes网络通信原理
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/1913077.html
Copyright © 2011-2022 走看看