如何使用css让img垂直居中(display方法)?

html-css016

如何使用css让img垂直居中(display方法)?,第1张

首先创建一个div,以及对有图片的div设置样式,给img的父级添加一个diaplay,并且属性为table,并

且把包含图片的div中的display属性设置成table-cell,最后给有图片的div设置成vertical-align:

middle属性,代码如下:

.tablebox{

width: 300px

height: 250px

background: #fff

display: table

}

#xxx{

display: table-cell

vertical-align: middle

}

#xxx img{

width: 100px

}

可以多看看黑马程序员的课程,多学学这些基础知识。

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