Web Front-end
CSS Tutorial
How to center img image with css? The display attribute of css implements image centering (code example)
How to center img image with css? The display attribute of css implements image centering (code example)
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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/815/403/273/1539915497904295.jpg" class="lazy" / alt="How to center img image with css? The display attribute of css implements image centering (code example)" >
</div>
</body>
</html>Rendering:
Instructions:
Setting display: table-cell; in the demo box will cause the demo box to be displayed as a table cell (similar to
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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/815/403/273/1539915497904295.jpg" class="lazy" / alt="How to center img image with css? The display attribute of css implements image centering (code example)" >
</div>
</body>
</html>Rendering:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement flexible layout and responsive design through vue and Element-plus
Jul 18, 2023 am 11:09 AM
How to implement flexible layout and responsive design through vue and Element-plus. In modern web development, flexible layout and responsive design have become a trend. Flexible layout allows page elements to automatically adjust their size and position according to different screen sizes, while responsive design ensures that the page displays well on different devices and provides a good user experience. This article will introduce how to implement flexible layout and responsive design through vue and Element-plus. To begin our work, we
How to achieve horizontal scrolling effect through CSS Flex layout
Sep 27, 2023 pm 02:05 PM
Summary of how to achieve horizontal scrolling effect through CssFlex elastic layout: In web development, sometimes we need to display a series of items in a container and hope that these items can scroll horizontally. At this time, you can use CSSFlex elastic layout to achieve the horizontal scrolling effect. We can easily achieve this effect by adjusting the properties of the container with simple CSS code. In this article, I will introduce how to use CSSFlex to achieve a horizontal scrolling effect and provide specific code examples. CSSFl
How to use CSS Flex layout to implement responsive design
Sep 26, 2023 am 08:07 AM
How to use CSSFlex elastic layout to implement responsive design. In today's era of widespread mobile devices, responsive design has become an important task in front-end development. Among them, using CSSFlex elastic layout has become one of the popular choices for implementing responsive design. CSSFlex elastic layout has strong scalability and adaptability, and can quickly implement screen layouts of different sizes. This article will introduce how to use CSSFlex elastic layout to implement responsive design, and give specific code examples.
How to center a div in html
Apr 05, 2024 am 09:00 AM
There are two ways to center a div in HTML: Use the text-align attribute (text-align: center): For simpler layouts. Use flexible layout (Flexbox): Provide more flexible layout control. The steps include: enabling Flexbox (display: flex) in the parent element. Set the div as a Flex item (flex: 1). Use the align-items and justify-content properties for vertical and horizontal centering.
Detailed explanation of spacing and white space processing methods in CSS Flex flexible layout
Sep 26, 2023 pm 08:22 PM
Detailed explanation of spacing and white space processing methods in CSSFlex flexible layout Introduction: CSSFlex flexible layout is a very convenient and flexible layout method, which can help us easily create responsive web page layout. When using Flex layout, you often encounter problems with setting spacing and dealing with whitespace. This article will detail how to handle spacing and whitespace in Flex layout and provide specific code examples. 1. Set spacing In Flex layout, we can set spacing in several ways. These are introduced below
How to use CSS Flex layout to achieve equal-height column layout
Sep 27, 2023 pm 03:17 PM
How to use CSS Flexible Layout to implement equal-height column layout CSS Flexible Box Layout (CSS FlexibleBox Layout), referred to as Flex layout, is a module used for page layout. Flex layout makes it easier for us to implement equal-height column layouts, so that they can be displayed at equal heights regardless of the height of the content. In this article, we will introduce how to use CSSFlex layout to achieve equal height column layout. Below are specific code examples. HTML structure: &
How to implement two-column layout through CSS Flex layout
Sep 26, 2023 am 10:54 AM
How to implement two-column layout through CSSFlex flexible layout CSSFlex flexible layout is a modern layout technology that can simplify the process of web page layout, allowing designers and developers to easily create layouts that are flexible and adaptable to various screen sizes. Among them, implementing a two-column layout is one of the common requirements in Flex layout. In this article, we will introduce how to use CSSFlex elastic layout to implement a simple two-column layout and provide specific code examples. Using Flex containers and projects
A guide to CSS flexible layout properties: position sticky and flexbox
Oct 27, 2023 am 10:06 AM
A Guide to CSS Flexible Layout Properties: positionsticky and flexbox Flexible layout has become a very popular and useful technique in modern web design. It can help us create adaptive web page layouts so that web pages can display and respond well on different devices and screen sizes. This article will focus on two flexible layout properties: position:sticky and flexbox. We'll discuss their usage in detail, with concrete code examples
