用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 ...
随机推荐
- paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库.
paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库. mmseg默认词库只能是文件格式...不好维护..要是不个词库放的个数据库里面走好维护兰.. 要实现2个目标..: 1 ...
- paip.获取proxool的配置 xml读取通过jdk xml 初始化c3c0在代码中总结
paip.获取proxool的配置 xml读取通过jdk xml 初始化c3c0在代码中 xml读取通过jdk xml 初始化c3c0在代码中.. ... 作者Attilax 艾龙, EMAI ...
- wicket基础应用(1)--使用wicket对表单中的数据进行验证
作者:lhx1026 出处:http://lhx1026.iteye.com/ wicket基础应用(1)--使用wicket对表单中的数据进行验证 举个例子: 1.有一个Java文件SysCharg ...
- Leetcode 232 Implement Queue using Stacks STL
本题用两个栈实现队列,用栈的基本操作去实现队列的所有基本操作push(),pop(),peek()以及empty() sa作为输入栈,sb作为输出栈,将sa输入元素的反转过来放到sb中 push与sa ...
- Leetcode 166. Fraction to Recurring Decimal 弗洛伊德判环
分数转小数,要求输出循环小数 如2 3 输出0.(6) 弗洛伊德判环的原理是在一个圈里,如果一个人的速度是另一个人的两倍,那个人就能追上另一个人.代码中one就是速度1的人,而two就是速度为2的人. ...
- EnumHelper枚举常用操作类
在项目中需要把枚举填充到下拉框中,所以使用统一的方法实现,测试代码如下: namespace CutPictureTest.Comm { public class EnumHelper { publi ...
- AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
- spring(3) JDBC
Step Description 1 Create a project with a name SpringExample and create a package com.tutorialspoin ...
- 利用 Python 只连接一次 MySQL
Github 地址 项目背景 最近做个项目,需要进行试驾分析,所谓"试驾",是指顾客在 4S 店指定人员的陪同下,沿着指定的路线驾驶车辆,从而了解这款汽车的行驶性能和操控性能.通常 ...
- python 相关安装和配置
永久链接: http://michaelzqm.iteye.com/blog/1841966 预览文章: python环境搭建 2013-04-04 博客分类: 综合 一. window环境安 ...