Heim > Artikel > Web-Frontend > Bild mit CSS zentrieren

Bild mit CSS zentrieren

WBOYnach vorne: 2023-09-17 17:37:02756Durchsuche

使用 CSS 将图像居中

Um das Bild zu zentrieren, verwenden Sie die Eigenschaften margin-left, margin-right und Block CSS. Sie können versuchen, den folgenden Code auszuführen, um das Bild zu zentrieren

Beispiel

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>

Das obige ist der detaillierte Inhalt vonBild mit CSS zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css margin

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was sind die realen Anwendungen von CSS und SVG?Nächster Artikel：Was sind die realen Anwendungen von CSS und SVG?

In Verbindung stehende Artikel

Mehr sehen