用CSS让未知高度内容垂直方向居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
display:table;
text-align:center;
#position:relative;
}
#middle{
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
#left:50%;
}
#inner{
#position:relative;
#top:-50%;
#left:-50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</div>
</body>
</html>
原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
position:relative;
}
#inner{
position:relative;
left:50%;
top:50%;
margin-left:-71px;
margin-top:-27px;
}
</style>
</head>
<body>
<div id="outer">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</body>
</html>
用负margin实现，但缺点是要知道居中内容的宽度和高度。
用CSS让未知高度内容垂直方向居中的更多相关文章
- CSS实现未知高度图文混合垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...
- CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
- css实现未知高度水平垂直居中
页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- 【笔记】css基于box的一行时垂直方向居中，多行平均居中，多出部分还省略号代替
题目很长,其实他就是这样的: 看标题,一行的时候是这样的,在行中间 标题文字多的时候是这样的,变成2行,超出部分用省略号: 但是为了更好的兼容性,没有使用flex,使用的是box布局. 核心代码就是这 ...
- CSS之未知高度img垂直居中
测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...
- js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...
- html如何让label在div中的垂直方向居中显示？
设置label的行高 line-height 和div的高度一致即可.
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
随机推荐
- Mongodb副本集
Replication:副本集 副本集可以将客户端的写操作分散到不同的服务器,可以用于灾难恢复,报告和备份. 副本集需要一个主服务器和一个备服务器,以及一个仲裁服务器.仲裁服务器决定将哪一个服务器作为 ...
- php学习第一讲----php是什么？
前言:不要在冲动的情况下做任何决定 ——————————————————————————————————————————————————————---- 一.学php之前的一些需要了解的知识 (1)网 ...
- Leetcode 70 Climbing Stairs 递推
其实就是斐波那契数列 参考dp[n] = dp[n-1] +dp[n-2]; class Solution { public: int climbStairs(int n) { ; ; ; ; i & ...
- 3D touch 静态、动态设置及进入APP的跳转方式
申明Quick Action有两种方式:静态和动态 静态是在info.plist文件中申明,动态则是在代码中注册,系统支持两者同时存在. -系统限制每个app最多显示4个快捷图标,包括静态和动态 静态 ...
- ADO.NET笔记20160322
####ADO.NET ####1 启用sa验证与窗体相关知识 - 启用sa验证 - ShowDialog() ---- ####2 连接字符串 Data Source=服务器 ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- HDU 1711 Number Sequence （KMP）
白书说这个是MP,没有对f 数组优化过,所以说KMP有点不准确 #include <stdio.h> int a,b; int T[1000010],P[10010];//从0开始存 in ...
- Adafruit的树莓派教程第五课：使用控制电缆
Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiM ...
- ArrayList/Vector的原理、线程安全和迭代Fail-Fast
疑问 * ArrayList是非线程非安全的,具体是指什么?具体会产生什么问题?* ArrayList的内部原理是什么?为什么可以动态扩容?* Vector是线程安全的,具体是如何实现的?为什么不再推 ...
- 【高德地图API】如何设置Icon的imageSize？
在地图开发中,我们需要把标注换成各种各样的图片,以突显个性. 在高分辨率的手机下,图片尺寸需要压缩至一半,以保持图片清晰.让我们来看一看,应该如何实现. 有开发者为了改变图片的尺寸,直接写成了 ...