当前位置:首页 > CSS > 关键词 > 居中 > 正文

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

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>

说明:

在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>

说明:

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

本文转载于:php中文网,如有侵犯,请联系zhimatong@qq.com删除

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

内容有用

联系
顾问

在线
客服
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录