css中怎么让img图片居中

发布时间:2020-09-14 10:36:52 作者:小新
来源:亿速云 阅读:812

css中怎么让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图片居中

说明:

在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图片居中

说明:

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

感谢各位的阅读!看完上述内容,你们对css中怎么让img图片居中大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. css让img垂直居中的方法
  2. css中让图片居中方法有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:Maven项目中读取src/main/resources目录下的配置文件的方法

下一篇:C#简单实现表达式目录树(Expression)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》