css怎么让img图片居中,css的display属性实现图片居中及代码实例

作者 : MOOMOO 本文共1436个字,预计阅读时间需要4分钟 发布时间: 2022-04-25 共15人阅读

在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果。那么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=https://www.moomoo.top/wangzhanjiaocheng/"1.jpg" />>

说明:

在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=https://www.moomoo.top/wangzhanjiaocheng/"1.jpg" />>

说明:

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


      
1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » css怎么让img图片居中,css的display属性实现图片居中及代码实例

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论