当前位置：首页 → 问答吧 → 如何使图片居中

如何使图片居中

时间：2010-09-03

来源：互联网

单独的一个页面，只有单独的一张图片，如何是这个图片居中呢？

PS：貌似看起来简单，做起来有点复杂。之前我用position，但是无法保证居中，用text-align的话，不符合语义吧，毕竟图片不是text，请各位大大赐教！！！！

作者: lz4261 发布时间: 2010-09-03

自己放张图片

<!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">
#aideOne {width:500px;height:500px;position:relative;border:1px solid red;}
#aideOne img {position:absolute;}
</style>
<script type="text/javascript">
function aidesi(){
var ai = document.getElementById("aideOne");
var aideimg = document.getElementById("aideimg");
var h = ai.offsetHeight;
var w = ai.offsetWidth;
var ih =aideimg.offsetHeight;
var iw =aideimg.offsetWidth;
aideimg.style.top= (h-ih)/2+"px";
aideimg.style.left= (w-iw)/2+"px";
}
</script>
</head>
<body>

<div id="aideOne">
<img id="aideimg" src="images/1.gif" alt="" onload="aidesi()"/>
</div>
</body>
</html>

作者: llqfront 发布时间: 2010-09-03

非常感谢楼上的朋友，不过非得用js吗，没有纯CSS的办法吗？

作者: lz4261 发布时间: 2010-09-03

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
* {margin:0;padding:0;}
div {width:800px;height:600px;display:table-cell;text-align:center;vertical-align:middle;border:1px red solid;}

</style>
</head>
<body>
<div>
<img src="1.jpg" alt="居中"/>
</div>
</body>
</html>

不兼容所以只能用js

作者: llqfront 发布时间: 2010-09-03

哦，原来如此，谢谢庆哥！！！！

作者: lz4261 发布时间: 2010-09-03

哈哈没事

作者: llqfront 发布时间: 2010-09-03

一个页面、一张图片
那就用table啊……

作者: 15heaven 发布时间: 2010-09-03

学学了

作者: lyl198659 发布时间: 2010-09-03