用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 ...
随机推荐
- 浅谈压缩感知（三十一）：压缩感知重构算法之定点连续法FPC
主要内容: FPC的算法流程 FPC的MATLAB实现 一维信号的实验与结果 基于凸优化的重构算法 基于凸优化的压缩感知重构算法. 约束的凸优化问题: 去约束的凸优化问题: 在压缩感知中,J函数和H函 ...
- atitit.自适应设计悬浮图片的大小and 位置
atitit.自适应设计悬浮图片的大小and 位置 #--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:- ...
- jquery时间倒计时
代码: js: function countDown(time, id) { //time的格式yyyy/MM/dd hh:mm:ss var day_elem = $(id).find('. ...
- Python之Web框架们
Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. pip i ...
- Leetcode 342 Power of Four 数论
题意:判断一个数是不是4的幂数,和Power of two类似. 先判断num是否大于0,再判断num是否能开根号,最后判断num开根号后的数是否是2^15的约数. 提示:4的幂数开根号就是2的幂数. ...
- 查看LINUX进程内存占用情况(转)
可以直接使用top命令后,查看%MEM的内容.可以选择按进程查看或者按用户查看,如想查看oracle用户的进程内存使用情况的话可以使用如下的命令: (1)top top命令是Linux下常用的性能分析 ...
- 远哥教你MuleESB系列视频教程
远哥教你MuleESB系列视频课程介绍(共11个视频) 1.Mule ESB介绍 2.社区版/企业版的区别和安装 3.MuleESB快速入门,以及MEL和Message结构 4.官方例子讲解( ...
- LeetCode:Spiral Matrix I II
Spiral Matrix Given a matrix of m x n elements (m rows, n columns), return all elements of the matri ...
- android 6.0权限判断 音频 拍照 相册
------------------------------------------打开音频权限------------------------------------------------ if ...
- 解决部份机型toast不显示问题
问题:部份机型不显示toast 解决方案: 1.自己在设置里面去允许通知,但是显然客户会说别的app都可以,so 2.自定义解决.查看toast的源码发现其附着在window上 源码下载地址:http ...