请教css中image居中写法

html-css09

请教css中image居中写法,第1张

<!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</title>

<meta name="author" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

<style type="text/css">

.content {width:200pxheight:100pxoverflow:hiddenbackground-color:#fafafa}

.content img {display:blockmargin:0 auto}

</style>

<script type="text/javascript">

</script>

</head>

<body>

<div class="content">

<div><img src="tt.jpg"><div>

</div>

</body>

</html>

<!--上述代码兼容ie6,7,8,ff, safari, opera, chrome! -->

.content img {display:blockmargin:auto}

即可

如果你仅仅需要在ie中用css控制图片大小并且不变形的方法.

则给需要变形的img赋予 zoom 这个CSS属性,他的值为 0到1之间的小数,比如

img {zoom:0.5}

即图片的长宽变为原来的一半。