css图片中间添加空白区域怎么弄

html-css012

css图片中间添加空白区域怎么弄,第1张

css图片中间添加空白区域按照以下步骤弄。

1、将图片转化为块级对象。

2、设置图片的垂直对齐方式。

3、设置父对象的文字大小为0px。

4、改变父对象的属性。

5、设置图片的浮动属性。

6、取消图片标签和其父对象的最后一个结束标签之间的空格。

用绝对定位..

background-position: -186px -22px 定位背景的具体位置..

比如你这个整体图, 是一张背景 , 你就可以通过 background-position:XX

来定位 这个张背景图的具体显示那块内容.. 可以去试试..网上很多素材

光靠字面理解很难，最好自己动手实践

方法一：

<div style="width:600pxheight:200pxbackground:url(路径图片中间部分切成1px宽) repeat-x">

<img src="路径图片左圆角" style="float:left"/>

<img src="路径图片右圆角" style="float:right"/>

</div>

方法二：

<div style="width:600pxheight:200pxbackground:url(图片中间部分切成1px宽)">

<div style="background:url(路径图片左圆角) no-repeatfloat:leftwidth:左圆角宽pxheight:左圆角高px">

<div style="background:url(路径图片右圆角) no-repeatfloat:rightwidth:右圆角宽pxheight:右圆角高px">

</div>

注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充

写个简单的例子给你吧

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>