善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是CSS控制图片水平居中与垂直居中

傅汉松

一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。

图片的水平居中

图片的水平居中比较简单,也比较常见。就是使用外边距margin:0 auto来控制水平居中。

.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;
}

效果如下:


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 CSS控制图片水平居中与垂直居中
一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。图片的水平居中图片的水平居中比较简单,也比较...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    85.54ms