In general, you cannot use the CSS text-align property to center an image, as it works only on block elements, and the <img> is an inline one. But there is a trick that will help you to center the image with the text-align property. If you need this property for some reasons, you can add a <div> element and specify the text-align property on it. Use the “center” value of this property.
- Code Html
<!DOCTYPE html> <html> <head> <title>How to Center an Image with the CSS text-align Property</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="blog"> <img src="images/nature.png" alt="alt image" title="title image" width="200" height="185" /> </div> </body> </html> - Code Css
.blog { border: 1px solid green; text-align: center; }
