为什么在火狐可以水准垂直居中，Chrome中就不行
日期：2014-05-16 浏览次数：20603 次
为什么在火狐可以水平垂直居中，Chrome中就不行？
代码如下，图片在火狐中可以水平居中，也可以垂直居中，但是在Chrome中只能垂直居中，不能水平居中。我搞了好久都找不到解决方法，大家帮我看看，谢谢了！
注：javascript:DrawImage(this, 300, 300) 是一个等比例缩小放大的函数。
------解决方案--------------------
这个应该是居中的 楼主可以把img给定宽度试试
------解决方案--------------------
你的js函数有问题吧。。
测试了再chrome 25.0.1364.172 m下没问题，就直接用css控制了下长宽
------解决方案--------------------
这个你测试到底是不是js函数引起的，直接把js函数删掉，然后看看是不是能居中，就知道了。
并且，你这个函数里面就是在修改宽度和高度，你竟然说没有控制CSS样式。。。
------解决方案--------------------
ImgD.style.display = "table-cell";
把最后面的这个去掉试试吧。
------解决方案--------------------
我对这个不是太理解
你可以这么认为，display是作用于是用的标签本身的，是让它和table中的td一样的样式，而通常呢，td都是居左显示的，左边或者是table的左边界，或者是上一个兄弟td。所以，你这里设置了table-cell之后，img就去居左了。
可以举个简单的例子：
这里，内部的那个div是居中显示的。
如果你在里面再加个display：tabel-cell试试看，它就
代码如下，图片在火狐中可以水平居中，也可以垂直居中，但是在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试试看，它就
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
