收集两种垂直居中的代码

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

相关文章

来自专栏十月梦想

html元素居中情况分类

内联元素,也叫行内元素(inline):(,a,input,span,b,i,u....)默认不会进行换行,不能设置宽度和高度.

443
来自专栏达摩兵的技术空间

固定宽高比例盒模型实现方案

常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

622
来自专栏编程坑太多

html元素(标签)

1062
来自专栏Python

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px...

18010
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

19310
来自专栏一“技”之长

标签之美九——列表 原

无序列表使用<ul></ul>来定义标签的开始和结束。使用<li></li>来设置标签项,示例如下:

652
来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

462
来自专栏十月梦想

CSS边框

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

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

学习纲要:CSS 布局

391
来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

2687

扫码关注云+社区