请教css中image居中写法

html-css012

请教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! -->

body {

background: url("./../img/bg.jpg") fixed center center no-repeat

background-size: cover

width: 100%

}

zoom属性确实是ie专有属性,除了设置或者检索对象的缩放比例之外,它还具有触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 但是火狐浏览器不支持zoom属性,不过在webkit内核浏览器中zoom这个属性也是可以被支持的。

显然,你这里设置的zoom:2,  即表示放大为原来的2倍,里面的字体也相应被放大了2倍。

在IE浏览器里,Zoom的使用方法是这样的:

 zoom : normal | number

normal :  默认值。使用对象的实际尺寸

number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只有在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等。

其实这个属性是一个不标准的css属性,因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。关于transform属性的具体属性和使用可查看在线教程CSS3 transform 属性。

希望我的回答能够帮到你。