<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>inline-block实现未知尺寸元素水平垂直居中终极方案</title>

<style>

#demo{

    overflow:hidden;

    resize:both;

    width:180px;

    height:100px;

    margin:10px auto;

    text-align:center;

    background:#eee;

    font-size:0;

}

#demo:after,#demo span{

    display:inline-block;

    *display:inline;

    *zoom:1;

    width:0;

    height:100%;

    vertical-align:middle;

}

#demo:after{

    content:'';

}

#demo p{

    display:inline-block;

    *display:inline;

    *zoom:1;

    vertical-align:middle;

    font-size:16px;

}

</style>

</head>

<body>

<div id="demo">

    <p>这是一个终极实现的水平垂直居中实例</p>

    <!--[if lt IE 8]><span></span><![endif]-->

</div>

</body>

</html>

Middle-help 终极实现元素水平垂直居中的更多相关文章

  1. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  2. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  3. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  4. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  5. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  6. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

  7. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  8. css元素水平垂直居中

    温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...

  9. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Less——less基本安装

    1.下载node.js 我们需要NodeJ运行LESS示例. 要下载NodeJ,请打开链接https://nodejs.org/en/ 2.node.js安装是否正确 在cmd中输入lessc -v, ...

  2. 汇总——WEB前端资源网

    前端攻城师 爱思资源网 HTML5吧 0101后花园 前端网 编程教程和源代码示例 Javascript中文网 Web前端资源网 移动端HTML5资源整理 Web开发者 SegmentFault 前端 ...

  3. PHP 之转换excel表格中的经纬度

    <?php set_time_limit(0); include './plugin/PHPExcel/PHPExcel.php'; include './plugin/PHPExcel/PHP ...

  4. DECLARE_DYNAMIC

    DECLARE_DYNAMIC(class_name) DECLARE_DYNCREATE 包含了DECLARE_DYNAMIC的功能,并且可以在运行过程中动态创建对象.如果需要动态创建类对象,需要使 ...

  5. xamarin.forms模拟rem动态大小值，实现屏幕适配

    开发app的时候,比较麻烦的地方,就是处理屏幕适配,比如文字设为12的大小,测试的时候,看得文字挺正常,可是,放到高分辨率设备一看,文字就变得特别小, 怎样实现随着分辨率变大或者变小,所有的size数 ...

  6. CAD绘制一个角度标注（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawDimAngular 绘制一个角度标注.详细说明如下: 参数 说明 DOUBLE dAngleVertexX 角度标注的顶点的X值 DOUBLE dA ...

  7. SQL With As 用法Sql 四大排名函数（ROW_NUMBER、RANK、DENSE_RANK、NTILE）简介

    Sql 四大排名函数(ROW_NUMBER.RANK.DENSE_RANK.NTILE)简介   排名函数是Sql Server2005新增的功能,下面简单介绍一下他们各自的用法和区别.我们新建一张O ...

  8. Centos 7中，防火墙配置端口规则

    注意:firewalld服务有两份规则策略配置记录,配置永久生效的策略记录时,需要执行"reload"参数后才能立即生效: Permanent:永久生效的 RunTime:现在正在 ...

  9. Python面向对象----继承, 重载

    1. 面向对象三大特性之继承. 继承的便捷是子类可以直接调用父类里面的方法和属性.(在强类型语言里面是只能调用公有成员), 不用重复的造轮子. 减少程序猿的负担.实现多态等上层结构 2. 父类代码 3 ...

  10. 解决git pull每次提示输入账号密码的问题

    每次用git同步代码的时候,都会提示输入账号密码,很麻烦,费时间,所以找了一种可以免去每次都要输入账号密码的方法 1. git bash进入你的项目目录 2. 输入以下命令会在配置文件里添加信息,作用 ...