日期:2014-05-16  浏览次数:20547 次

为什么在火狐可以水平垂直居中,Chrome中就不行?
本帖最后由 ppsharp 于 2013-12-31 00:23:46 编辑
代码如下,图片在火狐中可以水平居中,也可以垂直居中,但是在Chrome中只能垂直居中,不能水平居中。我搞了好久都找不到解决方法,大家帮我看看,谢谢了!

注:javascript:DrawImage(this, 300, 300) 是一个等比例缩小放大的函数。


<!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>Test</title>
<script src="lib/js.js" type="text/javascript"></script>
<style type="text/css">
#a
{
width: 300px;
height: 300px;
margin: 10px;
display: table-cell;
border: 1px solid red;
text-align: center;
vertical-align: middle;
overflow: hidden;
}

#b
{
width: 300px;
height: 300px;
padding: 2px;
display: table-cell;
border: 1px solid #DDDDDD;
vertical-align: middle;
text-align: center;
}


</style>
</head>

<body>

<div id="a" >
 <a href="#"><img src="1.jpg" onload="javascript:DrawImage(this, 300, 300)" /></a>
</div>

<div id="b">
  <img src="1.jpg" onload="javascript:DrawImage(this, 300, 300);"  />
</div>

</body>
</html>

------解决方案--------------------
这个应该是居中的   楼主可以把img给定宽度试试
------解决方案--------------------
你的js函数有问题吧。。

测试了再chrome 25.0.1364.172 m下没问题,就直接用css控制了下长宽


#a img ,#b img{width:200px;height:200px}

------解决方案--------------------
这个你测试到底是不是js函数引起的,直接把js函数删掉,然后看看是不是能居中,就知道了。


并且,你这个函数里面就是在修改宽度和高度,你竟然说没有控制CSS样式。。。
------解决方案--------------------
ImgD.style.display = "table-cell";

把最后面的这个去掉试试吧。
------解决方案--------------------
我对这个不是太理解

你可以这么认为,display是作用于是用的标签本身的,是让它和table中的td一样的样式,而通常呢,td都是居左显示的,左边或者是table的左边界,或者是上一个兄弟td。所以,你这里设置了table-cell之后,img就去居左了。

可以举个简单的例子:
<div style = "border:1px solid #aaa;width:500px;height:400px;">
<div style = "width:200px;height:200px;margin:0 auto;background:#eee;">
</div>
</div>


这里,内部的那个div是居中显示的。

如果你在里面再加个display:tabel-cell试试看,它就