<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta content="IE=8" http-equiv="X-UA-Compatible"/>

    <title>CSS垂直居中</title>

    <style type="text/css">

      div {

        display:table-cell;

        vertical-align:middle;

        text-align:center;

        width:500px;

        height:500px;

        background:#B9D6FF;

        border: 1px solid #CCC;

      }

    </style>

    <!--[if IE]>

<style type="text/css">

i {

    display:inline-block;

    height:100%;

    vertical-align:middle

    }

img {

    vertical-align:middle

    }

</style>

<![endif]-->

  </head>

  <body>

    <h1>垂直居中(inline-block法)</h1>

    <div class="container">

      <i></i>

      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />

    </div>

  </body>

</html>

它的核心就是为外边框加了display：table-cell，说起来display这个属性，指让标签元素以表格单元格的形式呈现，类似于td标签，因为单元格可以使元素垂直居中。　

css未知高度垂直居中的更多相关文章

  1. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  2. css实现高度垂直居中

    1:单行文字垂直居中: 如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可. 如:<div style="height:25px;lin ...

  3. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 纯CSS基于窗口垂直居中

    都是IE8+的 <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> ...

  5. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  6. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  7. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  8. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  9. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

随机推荐

  1. .gitignore实现忽略提交

  2. python类方法@classmethod与@staticmethod

    目录 python类方法@classmethod与@staticmethod 一.@classmethod 介绍 语法 举例 二.@staticmethod 介绍 语法 举例 python类方法@cl ...

  3. 楼上请让路 RoarCTF2019 Writeup

    Misc 签到题 RoarCTF{签到!!!} 黄金六年 文件尾部有一段base64,解码为16进制可以看到是一个压缩包 打开压缩包需要密码 使用pr抽帧 可以看到部分帧中有二维码,依次扫码即可得到k ...

  4. Kafka源码研究--Comsumer获取partition下标

    背景 由于项目上Flink在设置parallel多于1的情况下,job没法正确地获取watermark,所以周末来研究一下一部分,大概已经锁定了原因: 虽然我们的topic只设置了1的partitio ...

  5. CodeForces - 1214D B2. Books Exchange (hard version)

    题目链接:http://codeforces.com/problemset/problem/1249/B2 思路:用并查集模拟链表,把关系串联起来,如果成环,则满足题意.之后再用并查集合并一个链,一个 ...

  6. ThingJS和传统3D开发的区别

    物联网3D可视化开发已经辐射到各行各业,无论车间还是消防,城市还是粮仓,亦或是地铁.科技园,物联网可视化是科技的进步,也是行业的进步.而传统的3D可视化开发实施起来并不那么乐观.如果使用ThingJS ...

  7. 判断一字串String中是否包含某一串字符串

    String ostype = data.getString("osType").toUpperCase(); //转换为大写 if (ostype.contains(" ...

  8. 设计模式C++描述----16.状态(State)模式

    一. 举例 一般汽车发动机工作时有四种状态,吸气.压缩.做功和排气. 在运行时,不同的状态会有不同的行为,当前的状态机在适当的时候会过渡到下一状态. 其实用户在使用时根本不知道当前的状态,也无需知道当 ...

  9. win系统下之docker安装centos7镜像

    1)    拉取镜像 输入命令docker pull centos:7 从仓库拉取centos7的镜像 2)    查看本地镜像 命令:docker images 可以查看已经把centos的镜像拉取 ...

  10. （七）golang-变量之基本数据类型（看这篇就够了）

    1.整数类型 类型 有无符号 占用存储空间 表示范围 备注 int8 有 1字节 -2**7~2**7-1   int16 有 2字节 -2**15~2**15-1   int32 有 4字节 -2* ...