Question

怎么让DIV在HTML插入图片 居中显示

<div class="banner"><img src="images/bann.gif "width="942" height="356" />
</div> # .banner{width:1000px; height:425px; margin:auto;}

Answer 1

水平居中：div设置：text-align:center;
img设置：width:图片宽度; margin:0 auto;

垂直居中：div设置：position:relative;
img设置：position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

<div> 的定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

Answer 2

<style type="text/css">
.banner{ width:1000px; height:425px; margin:0 auto; text-align:center; }
.banner img{ width:942px; height:356px; }
</style>
<div class="banner"><img src="images/bann.gif " /></div>

Answer 3

<div class="banner">
<img src="images/bann.gif "width="942" height="356" />
</div>
.banner{ width:1000px; height:425px; margin:auto;}
.banner img{ margin:0 auto;}

追问

没用呀

追答

你是要上下居中还是左右居中 如果是左右居中 我上边写的就可以 你确定你代码没写错么你给banner加上样式了么
你再个img 加个display:block;

追问

是居中了。但还要弄到上下居中

Answer 4

<div style="text-align:center;"> <img src="图片路径" /></div>

Answer 5

把DIV banner的宽度删掉 再设text-align:center

追问

图片居中了。但它是top居中。怎么居中到中间部位呢

追答

在div banner里加 padding-top: px；
padding-bottom: px

两值相同 可以改