收集两种垂直居中的代码

分两套看 holder的 display:table holder div的 display:table-cell; vertical-align:middle; 就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效 holder的 position:relative; holder div的 *position:absolute; top:50%; left:0; .holder p的 position: relative; top:-50%; 通过控制绝对层的位置实现ie6,7下的垂直居中 holder div中的*position:absolute是只给ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>完美的水平垂直居中!!--兼容ie6,ie7,ff,opera,safari的水平垂直居中</title>

<style media="screen" type="text/css">

.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}

.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}

.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}

.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}

/*

分两套看

holder的 display:table

holder div的 display:table-cell; vertical-align:middle;

就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效

holder的 position:relative;

holder div的 *position:absolute; top:50%; left:0;

.holder p的 position: relative; top:-50%;

通过控制绝对层的位置实现ie6,7下的垂直居中

holder div中的*position:absolute是只给ie6和7看的css hack

对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中

*/

</style>

</head>

<body>

<div class="wrapper">

<div class="holder">

<div><p><img src="http://www.caihong.cc/wp-content/themes/way-3/images/logo.jpg"/></p></div>

</div>

<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">

以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>文字的垂直居中</title>

<!-- display:table-cell; 以表格单元格的形式显示对象 */

vertical-align:middle;/* 内容以对象中部对齐*/

display: inline-block;

inline-block的元素既可以像块元素一样定义宽高,又可以和内联元素排列在一行 */

-->

<style type="text/css">

<!--

body{ text-align:center; }

.wrap{ width:100%; display:table;}

.center{height:200px;display: table-cell; vertical-align:middle;background:#708090;}

.valign{ width:0; display: inline-block; vertical-align: middle; height:100%;}

-->

</style>

</head>

<body>

<div class="wrap">

<div class="center">

<span class="valign"></span>

<img src="http://www.caihong.cc/wp-content/themes/way-3/images/logo.jpg" />

</div></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

3502
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3565
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

8976
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4895
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

4435
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.6K7
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4759
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

28610
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2997
来自专栏魂祭心

原 canvas绘制clock

5904

扫码关注云+社区