We often encounter this situation in projects. There are many ways to make the picture appear in the center, but the most recommended one is to use CSS to operate DIV, so I will introduce it to you below. Two methods, use CSS operations to center the image.
First, let the DIV object box in the picture be horizontally centered, which is the same as the CSS of making the text font horizontally centered in the DIV box.
The CSS style word to center the object content is:
text-align :center
text-align is the position of the content in the objectAttribute
center value is centered
1. The traditional HTML method to center the image horizontally and horizontally is to directly add "align="center"" to the label object to display the image in the object horizontally and horizontally centered.
Add "align="center"" directly into the label object to display the image in the object horizontally and centered.
align="center"使用方法： <p align="center"></p> align="center"居中图片DIV+CSS实例代码： <!DOCTYPE > <html xmlns="http://www.php.cn"> <head> <meta charset="utf-8" /> <title>图片横向居中</title> </head> <body> <p align="center"><img src="http://www.php.cn" /></p> </body> </html>
CSS to center the DIV object in the image horizontally
2. Use CSS styles to center the image in the DIV (horizontally centered)
HTML+CSS complete code As follows:
<!DOCTYPE >
<html xmlns="http://www.php.cn">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
<style>
.pcss5{text-align:center}
</style>
</head>
<body>
<p class="pcss5"><img src="http://www.php.cn" /></p>
</body>
</html>We can use the above two methods to achieve the centering of text, images, etc. It is generally recommended to use CSS, but often on web pages, we only need to modify the corresponding selection in the CSS file. You can modify the content center, left, or right using the container style.
Recommended reading:
What should I do if the web page is iframed?
The above is the detailed content of How to center css images. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
