您的位置：首页 > 其它

如何使图片在DIV 中水平垂直居中

2013-08-07 10:17 676 查看

　　下面通过一个小例子，介绍如何实现。

　　效果图：

　　

　　素材：

　　1. 宽高1px的背景图片 dl_bg00.gif

　　

　　2. 宽931px高342px的图片 dl_bg01.gif

　　

　　步骤：

　　1. 编写代码，将id为bg的div的宽高设为body大小，填充背景，代码如下：

　　

<!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>如何使图片在DIV中水平垂直居中</title>
<style type="text/css">
body,ul,h1,h2,h3,h4,h5,h6,p
{
margin:0;
padding:0;
border:0;
font-family:Arial Helvetica,sans-serif,"宋体";
font-size:12px;
}
html,body
{
height:100%;
}
body #bg
{
height:100%;
background:url(dl_bg00.gif);
}
</style>
</he
4000
ad>
<body>
<div id="bg">
</div>
</body>
</html>

　　2. 将盛放图片的id为main的div水平居中，设置背景，代码如下：

　　

<!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>如何使图片在DIV中水平垂直居中</title>
<style type="text/css">
body,ul,h1,h2,h3,h4,h5,h6,p
{
margin:0;
padding:0;
border:0;
font-family:Arial Helvetica,sans-serif,"宋体";
font-size:12px;
}
html,body
{
height:100%;
}
body #bg
{
height:100%;
background:url(dl_bg00.gif);
}
body #bg #main
{
width:931px;
height:342px;
margin-left:auto;
margin-right:auto;
background:url(dl_bg01.gif);
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
</div>
</div>
</body>
</html>

　　3. 将id为main的div中的背景图片垂直居中，代码如下：

　　

<!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>如何使图片在DIV中水平垂直居中</title>
<style type="text/css">
body,ul,h1,h2,h3,h4,h5,h6,p
{
margin:0;
padding:0;
border:0;
font-family:Arial Helvetica,sans-serif,"宋体";
font-size:12px;
}
html,body
{
height:100%;
}
body #bg
{
height:100%;
background:url(dl_bg00.gif);
}
body #bg #main
{
width:931px;
height:100%;/*进行修改*/
margin-left:auto;
margin-right:auto;
background:url(dl_bg01.gif) no-repeat center;
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航