<!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. Caffe RPN ：error C2220: warning treated as error - no 'object' file generated

    在 caffe里面添加rpn_layer.cpp之后,总是出现 error C2220: warning treated as error - no 'object' file generated 这 ...

  2. Gradle与Makefile构建工具的对比

    随着Android Studio的普及,越来越多的Android开发者也要开始了解和学习Gradle这款强大的代码构建工具了.我们在学习和了解一项新事物的时候,最快速的方法往往是与已知的事物进行比较, ...

  3. Python 之re正则表达式

  4. 学不好Python？我们分析看看正确的学习方法是什么-马哥教育

    提起对Python的印象,除了全能之外恐怕就是简单易学了.很多人都在推荐新手学Python入门,毕竟语法简单.语句简洁,所谓“人生苦短我用Python”绝不是一句空话.不过也不能忽视一点:Python ...

  5. Python编程时.py与.pyc文件的介绍

    Python的程序中,是把原始程序代码放在.py文件里,而Python会在执行.py文件的时候.将.py形式的程序编译成中间式文件(byte-compiled)的.pyc文件,这么做的目的就是为了加快 ...

  6. Linux - redis发布|订阅

    目录 Linux - redis发布|订阅 发布|订阅 基本命令 发布和订阅实例 正则方式订阅一个或者多个符合模式的频道 Linux - redis发布|订阅 发布: publish 订阅: subs ...

  7. Ubuntu | Flask + Gunicorn + Nginx 部署服务器环境

    现在我们手里有一个准备发布的项目,那么如何将他上传到你的服务器,并让外网访问呢? 前提: 1. 安装了Python环境 apt-get install python-dev 2. 安装Flask pi ...

  8. Huawei-R&S-网络工程师实验笔记20190527-华为设备密码重置、设置web管理

    >Huawei-R&S-网络工程师实验笔记20190527-华为设备密码重置.设置web管理 >>实验开始(使用SecureCRT 等工具软件): 一.华为设备密码重置,通过 ...

  9. 【LeetCode Weekly Contest 26 Q2】Longest Uncommon Subsequence II

    [题目链接]:https://leetcode.com/contest/leetcode-weekly-contest-26/problems/longest-uncommon-subsequence ...

  10. JVM内存监控(五)

    频繁fullgc排查 jvm配置 -Xms200m -Xmx200m -Xmn50m -XX:PermSize=30m -XX:+HeapDumpBeforeFullGC -XX:+HeapDumpA ...