Home > Article > Web Front-end > Center image using CSS

Center image using CSS

WBOYforward: 2023-09-17 17:37:02756browse

使用 CSS 将图像居中

To center the image, use the margin-left, margin-right, and block CSS properties. You can try running the following code to center the image

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border: 2px solid orange;
            border-radius: 3px;
            padding: 7px;
         }
         img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
   </body>
</html>

The above is the detailed content of Center image using CSS. For more information, please follow other related articles on the PHP Chinese website!

css margin

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What are the real-world applications of CSS and SVG?Next article：What are the real-world applications of CSS and SVG?

See more

Center image using CSS

Example

Related articles