Home > Article > Web Front-end > How to center an image in css
How to center an image in css
- 藏色散人Original
- 2021-07-26 11:03:1810531browse
Css method to center the image: 1. Set "
"; 2. Set the css code; 3. Set the style for the parent element; 4. Set the Img Just set "max-width:100% max-height:100%".
The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
css Centers the Image
css Centers the Image No matter it is a square, vertical or horizontal image, you can center the image under the parent frame, that is The square image occupies the entire parent frame; the horizontal image is padded left and right, top and bottom centered; the vertical image is padded left, right, center, top and bottom
1. The html is as follows:
<body> <p id="redblock"> <img src="katong.png" > /*这里的图片路径自己设置*/ </p> </body>
2. The css is as follows
body{
background-color: gray;
}
#redblock{
text-align: center;
display: table-cell;
vertical-align: middle;
width:400px;
height: 400px;
background-color: red;
}
img{
max-width: 100%;
max-height: 100%;
} 3. Set the style for the parent element:
a. Set the width and height width, height
b. Set text-align:center vertical-align:middle
c. Set display:table-cell
4. Set max-width:100% for Img max-height:100%
5. The display effect is as follows:
Horizontal chart
## Square chart
## Recommended Learn:
css video tutorial
The above is the detailed content of How to center an image in css. For more information, please follow other related articles on the PHP Chinese website!