css垂直居中方法(二)
第四种方法:
这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性。
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrapper {
display: table;
} #cell {
height: 300px;//如果不设置height,效果并不明显,显示的好像是不居中的,但是实际上在wrapper中是居中显示的
background-color: yellow;
display: table-cell;
vertical-align: middle;
}
.content{
height: 100px;//加上height是为了显示更明显一些
background-color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">diveeeeeeeeeeeeeeeeeeeeeeeeeeeeeuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuueeeeeeeeeeeee</div>
</div>
</div>
</body>
</html>
优点:
- content可以动态改变高度。当wrapper里没有足够空间时,content不会被截断
缺点:
- Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签
显示效果如下:
css垂直居中方法(二)的更多相关文章
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- [css] 垂直居中方法
原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...
- css垂直居中方法总结
在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...
- css垂直居中方法(四)
第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- css 垂直居中方法汇总
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...
- css垂直居中方法(一)
第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...
随机推荐
- 谷歌地图OGC WMTS服务规则
http://mt0.google.cn/vt/lyrs=s&x=0&y=0&z=1 其中:z即为瓦片的层次,0层覆盖全球:y为行,从上往下为0~2^z-1:x为列,从左往右依 ...
- http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
- 计时器(C#)
很多项目要用到计时器,我就自己包装了一个,倒计时还没加,有时间再加上吧.持续更新 using UnityEngine; using UnityEngine.UI; /// <summary> ...
- 使用 docker 拉取镜像和创建容器-nginx
本文主要分享通过从docker hub上获取nginx镜像 1.首先查找nginx镜像 [root@node1 ~]# docker search nginx NAME DESCRIPTION ST ...
- c#将DataTable内容导出为CSV文件
写了个类: class DataTableAndCSV { public static DataTable csvToDataTable(string file) { string strConn = ...
- 第三方开源--Android Image Cropper--图片裁剪
github下载地址:https://github.com/ArthurHub/Android-Image-Cropper 有两种使用方式: 第一种:Activity用法 1.添加 CropImage ...
- gradle_学习_02_gradle多模块构建实例
一.前言 二.多模块构建 1.工程结构 父工程:weixin-service 子模块:weixin-gz weixin-qy 2.父工程 weixin-service (1)build.gradle ...
- mac 上 mamp 配置虚拟主机 具体过程 ?
https://www.zhihu.com/question/32320396 mac 上 mamp 配置虚拟主机 具体过程 ? 按照哪些配置什么的 都搞好了 但是还不好 配置的主机 制定的目录 还是 ...
- mysql时间随笔
SELECT FROM_UNIXTIME(create_time,'%Y-%m-%d %H:%i:%s') FROM `order`; select date_add(FROM_UNIXTIME(cr ...
- queue容器
一.queue特性 queue是一种先进先出(first in first out,FIFO)的数据结构,它有两个口,数据元素只能从一个口进,从另一个口出.队列只允许从队尾加入元素,队头删除元素,必须 ...