css如何让img图片居中?css的display属性实现图片居中(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果。那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例),让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。

首先我们来了解一下display属性实现图片居中的两种方法是什么?

1、利用display的table-cell属性值,再配合text-align: center;vertical-align: middle;设置图片居中

2、设置display: flex;,利用弹性布局flex来设置img图片的居中

下面我们通过简单的代码示例,详细了解一下这两种方法是怎么实现图片居中的。

1、利用display:table-cell来实现img标签图片的水平和垂直居中

<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>img图片居中</title>   <style>    .demo{     width: 400px;           height: 300px;           border: 1px dashed #000;           display: table-cell; /*主要是这个属性*/           vertical-align: middle;           text-align: center;    }    .demo img{     width: 200px;     height: 150px;    }   </style>  </head>  <body>   <div class="demo">    <img src="1.jpg" />   </div>  </body> </html>

效果图:

css如何让img图片居中?css的display属性实现图片居中(代码实例)

说明:

在demo盒子中设置display: table-cell;会让demo盒子作为一个表格单元格显示(类似 <td> 和 <th>),在设置text-align: center;就会让img图片水平居中,设置vertical-align: middle;让img图片垂直居中。

2、弹性布局flex

<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>img图片居中</title>   <style>    *{margin: 0;padding:0;}    .demo{     width: 400px;           height: 300px;           margin: 50px auto;           border: 1px dashed #000;           display: flex;           justify-content: center;           align-items: center;    }    .demo img{     width: 200px;     height: 150px;    }   </style>  </head>  <body>   <div class="demo">    <img src="1.jpg" />   </div>  </body> </html>

效果图:

css如何让img图片居中?css的display属性实现图片居中(代码实例)

说明:

设置display: flex;实现flex弹性布局,在设置justify-content: center;让图片水平居中对齐,设置align-items: center;让图片垂直居中对齐。

总结:以上就是css给图片添加阴影的两种方法的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程,Html5视频教程,bootstrap视频教程!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css如何让img图片居中?css的display属性实现图片居中(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情