css图片居中(css图片居中代码怎么写)

css图片居中

1.利用display:table-cell，具体代码如下：
html代码如下：
1<divclass=”img_wrap”>
2<imgsrc=”wgs.jpg”>
3</div>
css代码如下：
1.img_wrap{
2width:400px;
3height:300px;
4border:1pxdashed#ccc;
5display:table-cell;//主要是这个属性
6vertical-align:middle;
7text-align:center;
8}
效果如下：
2.采用背景法：
html代码如下：
1<divclass=”img_wrap”></div>
css代码如下：
.img_wrap{
width:400px;
height:300px;
border:1pxdashed#ccc;
background:url(wgs.jpg)no-repeatcentercenter;
}
效果如下图：
3.图片外面用个p标签，通过设置line-height使图片垂直居中：
html代码如下：
1<divclass=”img_wrap”>
2<p><imgsrc=”wgs.jpg”></p>
3</div>
css代码如下：
1*{margin:0px;padding:0px}
2.img_wrap{
3width:400px;
4height:300px;
5border:1pxdashed#ccc;
6text-align:center;}
7.img_wrapp{
8width:400px;
9height:300px;
10line-height:300px;/*行高等于高度*/
11}
12.img_wrappimg{
13*margin-top:expression((400-this.height)/2);/*CSS表达式用来兼容IE6/IE7*/
14vertical-align:middle;
15border:1pxsolid#ccc;
16}

css图片居中代码怎么写

一、首要，咱们来看看css图片水平居中的办法
1、运用margin:0auto完成图片水平居中
css图片水平居中代码：
2、运用文本的水平居中属性text-align:center完成图片水平居中
css图片水平居中代码：
二、咱们来看看css图片笔直居中的完成办法
1、运用高==行高完成图片笔直居中
css图片笔直居中代码如下：
留意：此种办法需求注明高度才能够运用。
2、运用table完成图片笔直居中
css图片笔直居中代码如下：
留意：此种办法是运用了table的笔直居中属性
阐明：这儿运用display:table;和display:table-cell;来模仿table，这种办法并不兼容IE6/IE7，IE67不支持display:table，如果你不需求支持IE67那就能够用
这种办法有一个缺点：当你设置了display:table;可能会改动你的原有布局
3、运用绝对定位完成图片笔直居中
css图片笔直居中代码如下：
阐明：如果已知图片的宽度和高度能够用这种办法。