So zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen

So zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen: 1. Verwenden Sie das Randattribut des Bildes, um das Bild horizontal zu zentrieren, mit Code wie „margin:0 auto;“ 2. Verwenden Sie das Padding-Attribut von div to Zentrieren Sie das Bild vertikal mit Code wie „padding-top:50px;“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.

Wie zentriere ich das Bild in einem Div mithilfe von CSS?

So zentrieren Sie das Bild im Div

Verwenden Sie das Randattribut des Bildes, um das Bild horizontal zu zentrieren, und verwenden Sie das Padding-Attribut des Div, um das Bild vertikal zu zentrieren.

Der Strukturcode ist derselbe wie oben;

CSS-Code lautet wie folgt:

div {
width:300px;
height:150px; 
background-color:#eee; 
padding-top:50px; 
border:#000 1px solid;
}
 
img {display:block; margin:0 auto;}

Hinweis:

img ist ein Inline-Element, um es in ein Blockelement umzuwandeln display:block; und dann margin: 0 auto; verwenden, um eine horizontale Zentrierung des Bildes zu erreichen, und dann den Rand des div-Tags verwenden, um eine Zentrierung zu erreichen. align-Attribut, um das Bild horizontal zu zentrieren, und legen Sie dann den padding-top fest. Der Wert macht es vertikal zentriert

Die Struktur ist wie folgt:

<style type="text/css">
 div{
  width:180px;
  height:180px;
  border:1px solid #000;
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
 }
 div p{
  position:static;
  +position:absolute;
  top:50%;
 }
 div img{
  position:static;
  +position:relative;
  top:-50%;
  left:-50%;
 }
 </style>
 
<div><p><img  src="/static/imghwm/default1.png"  data-src="0225/12986229678396.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="So zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen" ></p></div><br>
<div><p><img  src="/static/imghwm/default1.png"  data-src="0225/12986229678396.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="So zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen" ></p></div>

Methode 2

<div>
<img  src="/static/imghwm/default1.png"  data-src="images/tt.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="So zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen" >
</div>
css样式如下：
div {
width:300px; 
height:150px;
background-color:#ccc; 
border:#000 1px solid; 
text-align:center; 
padding-top:50px;
}

(Empfohlen:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Div in CSS, um ein Bild anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!