零基础学做网站培训介绍

当前位置:

CSS控制图片水平居中与垂直居中

一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。
图片的水平居中
图片的水平居中比较简单,也比较常见。就是使用外边距margin:0 auto来控制水平居中。(相关教程:CSS3控制图片自适应屏幕大小和居中显示


.cont img{display:block;margin:0 auto;}

效果如下:
图片的水平居中
图片的垂直居中
要实现图片在一个区域垂直居中,需要设置图片所在区域的DISPLAY属性,把这个区域名转化成单元格,然后再通过垂直居中属性,让图片垂直居中。
具体代码如下:
html代码如下:


<div class="img_wrap">
<img src="wgs.jpg">
</div>

css代码如下:


.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}

效果如下:
图片的垂直居中

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制文字水平居中、垂直居中。CSS控制文字水平居中,需要使用text-align属性,其
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下DIV水平居中显示CSS代码。当我们写了一个DIV后,默认情况下,DIV是左对齐的,如何让一个DI
  • 一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。图片的水平居中图片的水平
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 在Dreamweaver cs5中,当我们点击HTML网页中的图片时,可以设置图片与文字的混排对齐方式。但在Dreamweaver CS6破解版版本中,软件已经取消了这个对齐