<!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. SAS进阶《深入解析SAS》之Base SAS基础、读取外部数据到SAS数据集

    SAS进阶<深入解析SAS>之Base SAS基础.读取外部数据到SAS数据集 前言:在学习完<SAS编程与商业案例>后,虽然能够接手公司的基本工作,但是为了更深入的SAS学习 ...

  2. VHDL_ADC之cic_diffcell

    library IEEE; use ieee.std_logic_1164.all; use ieee.numeric_std.all; library edclib; use edclib.pkg_ ...

  3. Git与SVN版本控制系统

    关于版本控制 什么是版本控制?版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.在本书所展示的例子中,我们仅对保存着软件源代码的文本文件作版本控制管理,但实际上,你可以对任 ...

  4. JSON，对象..的数据格式

    [此案例为自动产生的随机数] 对象: {a1:180,a2:721, a3:574} 序列化传值:将对象转化为Json字符串 public ActionResult Val2() { Random r ...

  5. Unittest加载执行用例的方法总结

    前言 说到测试框架,unittest是我最先接触的自动化测试框架之一了, 而且也是用的时间最长的, unittest框架有很多方法加载用例,让我们针对不同的项目,不同项目的大小及用例的多少自己选择加载 ...

  6. cmake更新版本简记

    问题描述: 由于需求,要在服务器上安装ANTs(Advanced Normalization Tools).然而最新版的ANTs需要下载源码并用cmake编译, 于是根据https://github. ...

  7. Vi/Vim基本用法

    Vi/Vim是Linux中一款功能强大的编辑器,vi是Visual Interface的缩写,即可视化接口,vim是vi iMprove的缩写,即 vi的增强版(具有语法着色功能).它在Linux上的 ...

  8. python 列出出当前目录及所有子目录下的文件

    [root@web1 test]# cat walk.py #!/usr/bin/python # -*- coding: UTF-8 -*- import os for root, dirs, fi ...

  9. pyhon中的内存优化机制

    一.变量的内存地址 python中变量的内存地址可以用id()来查看 >>> a = " >>> id(a) 2502558915696 二.pyhon中 ...

  10. scrapy框架的日志等级和请求传参, 优化效率

    目录 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 请求传参 如何提高scripy的爬取效率 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 在使 ...