名站导航为爱好css的朋友们提供相关的知识。
css教程 绝对定位absolute和相对定位relative实例讲解
- 此篇文章具体介绍如下
方法一:
使用margin方式，使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.manongjc.com/" />
<title>码农教程</title>
<style type="text/css教程">
div
{
height:400px;
width:400px;
border:1px solid red;
}
div img {margin-top:127px;}
</style>
</head>
<body>
<div><img src="/Public/images/logo.gif" alt="码农教程"></div>
</body>
</html>
方式二:
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.manongjc.com/" />
<title>码农教程</title>
<style type="text/css教程">
div
{
height:400px;
width:400px;
border:1px solid red;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div><img src="/Public/images/logo.gif" alt="码农教程" /></div>
</body>
</html>
vertical-align:middle;
display:table-cell;
line-height:400px;关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,css,图片,居中CSS教程 div宽度自适应
