css实现高度垂直居中
1:单行文字垂直居中:
如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可。
如:<div style="height:25px;line-height:25px;overflow:hidden">aa</div>
2:多行文本固定高度垂直居中:
核心:display:table 和display:table-cell ;vertical-align:middle;
兼容:ie7+
1 <div class="wrapper">
2 <div class="content">content age</div>
3 </div>
相对应的css代码如下:
.wrapper{
height:400px;
display:table;
}
.content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px; }
核心:display:table 和display:table-cell ;vertical-align:middle;以及使用绝对定位
兼容:ie6+
<div class="wrap">
<div class="subwrap">
<div class="content">aaaaa</div>
</div>
</div>
css代码部分:
.wrap{
display:table; //*****************************************display:table
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
*position:relative; //*************************************** *position:relative
overflow:hidden;
}
.subwrap{
vertical-align:middle; //************************************vertical-align:middle; display:table-cell; //*************************************display:table-cell
*position:absolute;
*top:50%;
}
.content{
*position:relative;
*top:-50%;
}
3:多行文本未知高度垂直居中:
现代浏览器的最新版都支持inline-block,只有该死的ie6、7不支持inline-block,但ie6、7可以通过 display:inline;zoom:1;来模拟。
但是在firefox,safari,opera,ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距,其实这个是换行符,如果将 inline-block 元素间的换行符去掉,这3px的间距就会消失了。
有没有在不影响代码美观的情况下去掉间距尼,答案是有的。可以在inline-block的父元素中加上 font-size:0;然后在 inline-block讲字体设回来。
下面是inline-block兼容的代码:
{
display:inline-block;
*display:inline;
*zoom:;
width:100px;
vertical-align:top;
}
css实现高度垂直居中的更多相关文章
- css未知高度垂直居中
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- CSS未知div高度垂直居中代码_层和布局特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS基于窗口垂直居中
都是IE8+的 <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> ...
- CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
- CSS实现完美垂直居中
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 tab ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- css实现水平 垂直居中
css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- css各种水平垂直居中
css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...
随机推荐
- 基于Ace Admin 的菜单栏实现
1.首先是数据库表必然包含以下几个字段Id ,ParnetId,Url,Name等 create table dbo.Module ( Id uniqueidentifier not null con ...
- JSPatch在MAC下的使用
简单调研JSPatch的使用,之所以在MAC下是因为可以创建一个命令行的应用,简化无关代码.具体做法如下: 第一步,去https://github.com/bang590/JSPatch/tree/m ...
- 高级工程师->架构师
1. 分解等级 技术人员典型的发展路径基本上都是下面的这个模式: 1) 0 ~1年:菜鸟,需要别人手把手来教 2)1 ~ 3年:初级,需要别人带你做 3)3 ~ 5年:高级,能独当一面,可以带初级技术 ...
- springboot结合swagger生成接口文档
原文链接:https://www.cnblogs.com/xu-lei/p/7423883.html https://www.jianshu.com/p/b9ae3136b292 前后台分离的开发渐渐 ...
- opencv-视频分解图片
1.加载视频2. info信息 3. 解码,parse方法解析视频 4. imshow展示或者保存imread # 视频分解图片 # 1 load 2 info 3 parse 4 imshow im ...
- flask-----No such file or directory绝对路径与相对路径
No such file or directory: '\\uploads\\03.jpeg' 相对路径:加点,或者直接绝对路径(尽量使用绝对路径,通过python的os模块获取当前文件绝对路径) o ...
- C语言初步学习I/O函数scanf、getchar、printf和putchar
scanf().printf().getchar()和putchar()这四个函数能够让用户和程序交流,所以被称为输入/输出函数,或简称为I/O函数. 这里先结合缓冲输入来讲讲scanf()和getc ...
- AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题
var map, toolip, overlay; var layer = new ol.layer.Vector(); var imgLayer = ...
- visual studio 2013 error: Page '312e8a59-2712-48a1-863e-0ef4e67961fc' not found.
In order to resolve this error do the following : Open Developer Command Prompt for VS 2013 as “Run ...
- P1415 拆分数列
传送门 DP数列长度过大无法枚举,考虑DP设f1[i]储存以第i个字符为结尾时,的最后一个数最小时,这个数的开头的位置(很难想有木有)OK,状态有了,方程想一想就出来了:设$num[i][j]$为数列 ...