Middle-help 终极实现元素水平垂直居中
<!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 终极实现元素水平垂直居中的更多相关文章
- IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- CSS元素水平垂直居中的方法
1. 元素水平居中 1.1 设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css元素水平垂直居中
温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...
- 【Web】CSS实现绝对定位元素水平垂直居中
网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- SpringBoot 搭建
1.使用Eclipse 建立Maven项目(webapp OR quickstart) 2.配置Maven,如下: <parent> <groupId>org.springfr ...
- 清瘦的记录者: 一个比dbutils更小巧、好用的的持久化工具
https://gitee.com/bitprince/memory 1. 概述 1.1 连接.语句和结果集 从JDBC的规范上看,其对数据访问层有相当简洁的抽象:1.连接(connection) 2 ...
- html——相对路径、绝对路径(有待补充....)
相对路径主要看你访问的文件相对自己的页面在哪个文件夹下.如果自己藏的很深,必须用“../”跳出.如果项目中的文件位置分布是这样: 那么index页面若要访问这两张图片就需要用相对路径: <img ...
- HashMap中capacity、loadFactor、threshold、size等概念的解释
约定 约定前面的数组结构的每一个格格称为桶 约定桶后面存放的每一个数据称为bin bin这个术语来自于JDK 1.8的HashMap注释. size size表示HashMap中存放KV的数量(为链表 ...
- JDK升级
保存jboss运行时环境的配置 删除jboss下面的缓存文件 删除deployments里面的war包 重新build项目
- viod 0是什么?
之前在牛客网上看到别人用viod 0来代替undefined,所以我去网上搜了一下,MDN是这么说的: 这个运算符能向期望一个表达式的值是undefined的地方插入会产生副作用的表达式. void ...
- 模板中tempname与class区别
前言 在分析traits编程之前, 我们需要对模板参数类型tempname和class有一定的了解, 要明白他们在哪些方面不同, 哪些方面相同, 这样才能对体会到traits编程的核心. 如果你已经明 ...
- Spring MVC 笔记 概述
学习笔记 模型:封装装程序数据 视图:渲染模型数据,一般来说就是输出HTML 控制:处理请求,构建模型并将其传递给视图进行渲染 以上三者均围绕DispatcherServlet设计,它处理所有的HTT ...
- Ubuntu 16.04 安装R和RStudio
在Ubuntu上安装R和Rstudio的时候碰到了一些依赖项不存在的错误 The following packages have unmet dependencies: r-base-core : D ...
- 基于supervisor秒级Laravel定时任务
背景介绍 公司需要实现X分钟内每隔Y秒轮训某个接口,Linux自带的crontab貌似只精确到分钟,虽然可以到精确到秒,但是并不满足需求. 选型 公司项目都是 基于 Laravel 框架,所以这个没得 ...