收集两种垂直居中的代码

分两套看 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 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

753
来自专栏吾爱乐享

php学习之html属性-表格(六)

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

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

1869
来自专栏成长道路

表格展示+多余数据省略+鼠标悬浮显示

本人非专业前端,写的不好还望多多指教 1.首先需要将需要这样处理的td,th设置一下样式     text-align: center; /*设置水平居中*/ ...

2100
来自专栏河湾欢儿的专栏

2.布局解决方案- 垂直居中<2>

垂直布局 写出两个盒子并满足以下条件条件: 1.里面的高度盒子不固定 2.外面盒子的高度不固定

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

c#:winform鼠标拖动窗口大小时,设定窗口最小尺寸

winform 程序运行过程中,用户用鼠标拖动窗体大小时,如将窗体调整得极小,可能窗体上的控件就面目全非(或看不到了),用下面的代码可以设定窗口的最小尺寸,以防...

17610
来自专栏无所事事者爱嘲笑

居中方案

1024
来自专栏九彩拼盘的叨叨叨

元素的水平居中的方法

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

502
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

19310
来自专栏十月梦想

HTML5之canvas画板介绍

• canvas 其实对于HTML来说很简单,只是一个标签元素而已,自己并没有行为,

982

扫码关注云+社区