图片居中怎么设置 css

html-css027

图片居中怎么设置 css,第1张

写个简单的例子给你吧

htlm如下：

<h4>图片水平居中</h4>

<div class="demo1">

<img src="你的图片" alt="">

</div>

<h4>图片垂直居中</h4>

<div class="demo2">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

</div>

<h4>图片水平垂直居中</h4>

<div class="demo3">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

</div>

css如下：

<style type="text/css">

.demo1{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: inline-blocktext-align: center}

.demo1 img{width: 100pxheight: auto}

.demo2{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo2 .imgbox{display: table-cellvertical-align: middle}

.demo2 .imgbox img{width: 100pxheight: auto}

.demo3{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo3 .imgbox{display: table-cellvertical-align: middletext-align: center}

.demo3 .imgbox img{width: 100pxheight: auto}

</style>

用CSS往图片上嵌入文字有二种方法，分别如下：

第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。

参考代码如下：

1

2

3

4

5

6

<div style="position:relativewidth:100pxheight:100px">

<img src="" alt="" />

<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">

文字

</div>

</div>

第二种方法、图片作为背景图片。

参考代码如下：

1

2

3

<div style="background:url(abc.jpg) no-repeat left top">

文字

</div>