文档章节

各浏览器下图片垂直居中的方法:

0000001
 0000001
发布于 2011/05/10 13:45
字数 797
阅读 319
收藏 2


各浏览器下图片垂直居中的方法:

1.IE6下使用writing-mode:tb-rl;当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。实现未知高度替换元素图片垂直居中:
<!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>
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao {
  width:500px;
  height:220px;
  line-height:220px;
  border: 1px solid;
  text-align: center;
}
.miao img {
  vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style type="text/css">
  .miao span {
    border: 1px solid red;
    height: 100%; /* 要保证和父元素高度一样才行 */
    writing-mode: tb-rl;
    vertical-align: middle;
  }
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中,图片垂直局中。</h1>
<p>使用的绝对定位和相对定位的方法</p>
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了
</div>
</body>
</html>
1.1 :因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:
<!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>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中,图片垂直局中。</h1>
<p>绿色容器是span,目的是使自己的左上角与容器中心点对齐。红色是具体图片,再次设置负值使自己的中心点和父容器的中心点重合,最终达到垂直局中的目的。</p>
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="width:300px;height:80px;">
    <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="width:500px;height:220px;">
    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>
</div>
</body>
</html>
2.未知高宽的图片垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

3.标准浏览器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
    margin:0;padding:0
    }
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    margin:auto
    }
div p {
    position:static;
    +position:absolute;
    top:50%
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
p:after {
    content:".";font-size:1px;
    visibility:hidden
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>

© 著作权归作者所有

上一篇: 5.13
下一篇: 网页性能
0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
699
0
vertical-align属性与垂直居中

让元素居中对齐是非常常见的需求,首先是水平居中,要实现水平居中行内元素只需要在其父元素上设置即可,对于块级元素来说让它的和即可(width不可为auto),那么垂直居中呢?找下css属性发现...

leozdgao
2015/05/21
0
0
CSS利用table-cell实现垂直居中

1.利用table-cell实现垂直居中 p{width: 500px;height: 500px;background: #ccc;}.box1{text-align:center;display: table-cell;vertical-align: middle;/ font-size: 118px; /}img{vertical......

ken_ding的博客
2017/12/20
0
0
CSS常用垂直居中布局

在前端岗位面试中,面试官为了考察前端攻城狮的css布局能力,非常喜欢问的其中一个问题就是如何让元素垂直居中,这种布局方法相信每一位同学都有自己喜欢的一套方法,但是面试官要你回答得越...

会写代码的husky
2016/10/29
15
0
html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

在日常开发中,经常会使用到图片与文字或图片与按钮对齐。 1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下: <div> <img src="" style="vertical-align:middle"/> <button type="bu......

突然很想飞
2015/12/08
5.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

当阿里云工程师回到了家乡......

根据真实故事改编 略有浮夸 但重要的是 9月25日13:30-16:30 云栖大会「5G边缘计算专场」 一定要来哦 !!! 本文作者:樰篱 原文链接 本文为云栖社区原创内容,未经允许不得转载。...

Mr_zebra
22分钟前
5
0
文件操作工具类 FileUtils常用方法

文件操作工具类(FileUtils) 使用该工具类的前提是项目里导入commons-io 包 import org.apache.commons.io.FileUtils; List<String> lines=new ArrayList<String>(); lines.add("欢迎访问:......

AndLong
29分钟前
5
0
maven-shade-plugin

最近,用规则引擎(drools)的封装了一个jar包,给别人使用。用的是maven-assembly-plugin打的包,可以把多个jar包里的class 给打成一个jar,感觉还是满好用的,但是打包成功后,发现报空指针错...

internetafei
34分钟前
5
0
Cassandra repair 工具使用

前言 Cassandra是一款去中心化的分布式数据库。一份数据会分布在多个对等的节点上,即有多个副本。我们需要定期的对多个副本检查,看是否有不一致的情况。比如因为磁盘损坏,可能会导致副本丢...

阿里云官方博客
37分钟前
5
0
element-vue使用富文本编辑器【前端】

一、前言 1.富文本编辑器选择的为vue-quill-editor 官方地址:https://quilljs.com/docs/quickstart/ 2.安装 cnpm install vue-quill-editor cnpm install quill 3.在对应的页面引入,在com...

一代码农码一代
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部