zoukankan      html  css  js  c++  java
  • img标签在div里上下居中

    方法一:图片尺寸未知,IE8-不支持

    CSS部分:
    <style>
    .content{
        width:500px;
        height:500px;
        border:1px solid black;
        position:relative;
    }
    </style>
    
    DOM部分:
    <div class="content">
    <img src="http://static.cnblogs.com/images/adminlogo.gif" style="margin-top:auto;margin-bottom:auto;top:0;bottom:0;position:absolute"/>
    </div>

    方法二:图片尺寸已知,正负margin抵消

    CSS部分:
    <style>
    .content{
        width:500px;
        height:500px;
        border:1px solid black;
        position:relative;
    }
    </style>
    
    DOM结构:
    <div class="content">
    <img src="http://static.cnblogs.com/images/adminlogo.gif" height=164 style="margin-top:-82px;top:50%;position:absolute"/>//margin-top:-imgheight/2
    </div>

    方法三:图片尺寸未知,table-cell属性,IE8-不支持

    CSS部分
    <style>
    .content{
        width:500px;
        height:500px;
        border:1px solid black;
        display:table-cell;
        vertical-align:middle
    }
    </style>
    
    DOM部分
    <div class="content">
    <img src="http://static.cnblogs.com/images/adminlogo.gif"/>
    </div>

    方法四:图片大小未知,背景图片

    CSS部分
    <style>
    .content{
        width:500px;
        height:500px;
        border:1px solid black;
        background:url('http://static.cnblogs.com/images/adminlogo.gif') center no-repeat;
    }
    </style>
    
    DOM部分
    <div class="content">
    </div>

    方法五:利用IFC,创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。见http://www.cnblogs.com/aaron-shu/p/4101198.html

  • 相关阅读:
    解决eclipse自动格式化影响svn提交的问题
    XShell下载安装并连接阿里云
    阿里云服务器购买选择
    三线程循环打印ABC流程解释
    eclipse个人开发较常用的快捷键
    eclipse调试的一些技巧
    Java序列化与反序列化
    vmware vsphere添加磁盘,不重启检测
    win10国内生态-恶心的经历
    本地win10 vmware 虚拟机centos7系统初始化网络配置
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4188364.html
Copyright © 2011-2022 走看看