How to center img image with css? The display attribute of css implements image centering (code example)-CSS Tutorial-php.cn

How to center img image with css? The display attribute of css implements image centering (code example)

青灯夜游

Release： 2020-07-10 17:19:14

Original

70771 people have browsed it

When we develop the front-end page, in order to make the page beautiful, the image will be centered. So how to center the img image with css? This article will show you how to center the img image with css? The display attribute of css implements image centering (code example), so that everyone can understand and master the two methods of setting the display attribute of css to center the img image. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s take a look at the two methods of display attribute to achieve image centeringWhat are they?

1. Use the table-cell attribute value of display, and then cooperate with text-align: center; and vertical-align: middle; Set the image to be centered

2. Set display: flex;, and use elastic layout flex to set the centering of the img image

Let’s follow Through simple code examples, let's learn more about how these two methods achieve image centering.

1. Use display:table-cell to achieve horizontal and vertical centering of img tag images

<!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="How to center img image with css? The display attribute of css implements image centering (code example)" / alt="How to center img image with css? The display attribute of css implements image centering (code example)" >
		</div>
	</body>
</html>

Copy after login

Rendering:

How to center img image with css? The display attribute of css implements image centering (code example)

Instructions:

Setting display: table-cell; in the demo box will cause the demo box to be displayed as a table cell (similar to and ). When setting text -align: center; will center the img image horizontally, and set vertical-align: middle; to center the img image vertically.

2. Flexible layout 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="How to center img image with css? The display attribute of css implements image centering (code example)" / alt="How to center img image with css? The display attribute of css implements image centering (code example)" >
		</div>
	</body>
</html>

Copy after login

Rendering:

How to center img image with css? The display attribute of css implements image centering (code example)

Description:

Set display: flex; to implement flex elastic layout, set justify-content: center; to align the image horizontally and center, and set align-items: center; to align the image vertically and center.

Summary: The above is a complete introduction to the two methods of using the display attribute of css to center images. I hope it will be helpful to everyone's learning. For more related tutorials, please visit CSS3 Video Tutorial, Html5 Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of How to center img image with css? The display attribute of css implements image centering (code example). For more information, please follow other related articles on the PHP Chinese website!