dreamweaver 背景图片居中

html-css0133

dreamweaver 背景图片居中,第1张

实现原理:将图片放到表格单元格里,通过添加align="center"实现居中。

1.准备图片素材,新建html网页。

2.打开Dreamweaver,在<body></body>里插入如下代码:

<table align="center" width=1133 height=1535 style="background:url(images/Book.jpg)">

<tr>

<td></td>

</tr>

</table>

3.在IE浏览器里预览。

先插入一个div标签,再建css规则,设置属性让图片居中,如下图:

<style type="text/css">

.an{  width:311px   /*背景图片宽度*/

      margin:auto  /*居中*/

     background-image:url(images/hd.jpg)     /*背景图片*/

     height:211px /*背景图片高度*/

     }

DW8让表格内的背景图片居中显示方法:

方法一、再建一表格,将图片与表格分别放入两个单元格中。

即:

<talbe>

<tr>

<td>

<!-- IMAGE -->

</td>

<td style="text-align:center">

<!-- TABLE -->

</td>

</tr>

</table>

方法二、在图片外套一个DIV标签,再在表格外套一个DIV,然后设置DIV属性。

即:

<style>

.content{text-align:centerborder:4px solid #99CC00width:40%}

.content #left{height:200pxfloat:leftborder:4px solid #BB0000width:40%}

.content #right{height:200pxfloat:leftborder:4px solid #009999width:60%text-align:center} <!-- float还是left -->

.content img{width:100%height:192px}

.content .t1{width:80%margin-top:2px}

.content .t1 td{height:80pxborder:3px dotted #990099width:50%text-align:center}

</style>

<div class="content">

<div id="left"><img alt="LEFT" title="IMAGE" /></div>

<div id="right">RIGHT<table cellpadding="0" cellspacing="0"

class="t1"><tr><td>R11</td><td>R12</td></tr><tr><td>R21</td><td>R22</td></tr></table></div>

</div>

方法三、如果什么都不相加也可以,只是不太好。

即:

<style>

.img{left:20pxposition:absoluteborder:5px solid #AA0000width:150pxheight:200px}

.table{width:30%height:200pxtext-align:centerfont-family:"楷体"color=#992211font-size:2em}

td{border:3px solid #00AA00}

</style>

<center>

<img class="img" alt="LEFT"/>

<table class="table" cellpadding="0" cellspacing="0">

<tr>

<td>

RIGHT1

</td>

<tr>

<tr>

<td>

RIGHT2

</td>

<tr>

</talbe>

</center>