<!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. Android开发之ThreadLocal原理深入理解

    [Android]ThreadLocal的定义和用途 ThreadLocal用于实现在不同的线程中存储线程私有数据的类.在多线程的环境中,当多个线程需要对某个变量进行频繁操作,同时各个线程间不需要同步 ...

  2. 回顾Google IO 2016 -Keynote【图解】

    Google IO大会倒计时进行中~~ 两名演奏者在使用高空“古筝”. 最后5秒倒计时~~~~全场轰动~ 倒计时结束,IO大会正式开始.屏幕中,一个人把纯白的唱片放入唱片机中. 然后欢快的音乐响起,台 ...

  3. python笔记之发送邮件

    发送邮件前提:开启邮箱授权码 一.开启授权码(以163邮箱为例) 1.登录163邮箱,点击设置--POP3/SMTP/IMAP,出现设置界面   2. 开启SMTP服务且可以查询SMTP的host地址 ...

  4. CAD导出黑白色的pdf（com接口）

    主要用到函数说明: IMxDrawModifyTheColor 接口 用来修改图面所有对象的颜色,把它的颜色都修改成一个指定的值. IMxDrawModifyTheColor::Do 修改颜色,详细说 ...

  5. （1）搜索广告CTR预估

    https://www.cnblogs.com/futurehau/p/6181008.html 一.广告投放系统 广告系统包含多个子系统.除了上图所示的广告投放系统外,还包含商业系统(广告库的获得) ...

  6. Python ---- KMP（博文推荐+代码）

    既解决完后宫问题(八皇后问题)后,又利用半天的时间完成了著名的“看毛片”算法——KMP.对于初学者来说这绝对是个大坑,非常难以理解. 在此,向提出KMP算法的三位大佬表示诚挚的敬意.!!!牛X!!! ...

  7. js for 循环 添加tr td 算法

    StringBuffer sb=new StringBuffer(); int n = 5; sb.append("<tr>"); List<MenuBean&g ...

  8. 第2章 Python序列

    Python序列类似于C或Basic中的一维.多维数组等,但功能要强大很多,使用也更加灵活.方便,Head First Python一书就戏称列表是“打了激素”的数组. Python中常用的序列结构有 ...

  9. ZooKeeper学习总结（1）——ZooKeeper入门介绍

    1. 概述 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 它有如下的一些特点: 简单 Zookeeper的核 ...

  10. [TYVJ1730]二逼平衡树

    [TYVJ1730]二逼平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:1.查询k在区间内的排名2.查询区间内排名为k的值3.修改某一位值上的数值4.查 ...