Wie verwende ich CSS, um das Bild vertikal und horizontal zu zentrieren?

Horizontale Zentrierung von CSS-Bildern

Wenn Sie margin: 0 auto verwenden, um eine Bildzentrierung zu erreichen, fügen Sie dem Bild wie folgt einen CSS-Stil margin: 0 auto hinzu:

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="margin: 0 auto;" />
</p>

Verwenden Sie die Horizontale Zentrierattribut des Textes text-align: center

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</p>

Vertikale Zentrierung des CSS-Bildes

Verwenden Sie height==row height, um eine vertikale Zentrierung des Bildes zu erreichen

Diese Methode kann Nur wenn Sie die Höhe kennen, lautet der Code wie folgt:

<p style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</p>

Verwenden Sie die Tabelle, um eine vertikale Zentrierung von Bildern zu erreichen

Die Methode zur Verwendung der Tabelle besteht darin, das Attribut für die vertikale Zentrierung zu verwenden Der Code lautet wie folgt:

Verwenden Sie display:table; um table zu simulieren. Diese Methode ist nicht mit IE67 kompatibel. Wenn Sie IE67 nicht unterstützen müssen, können Sie

verwenden. Nachteile: Wenn Sie display: table festlegen, kann sich Ihr ursprüngliches Layout ändern.

<p style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</span>
</p>

Verwenden Sie die absolute Positionierung, um das Bild vertikal zu zentrieren

Wenn die Breite und Höhe des Bildes bekannt sind, kann dies durchgeführt werden. Der Code lautet wie folgt:

<p style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</p>

Mobile Endgeräte können Flex-Layout verwenden, um eine vertikale Zentrierung von CSS-Bildern zu erreichen

Mobile Endgeräte verfügen im Allgemeinen über höhere Browserversionen, sodass Sie problemlos das Flex-Layout verwenden können (Flex-Layout bezieht sich auf die Verwendung des CSS3-Flex-Layouts). Der Demonstrationscode lautet wie folgt:

css代码：
<style type="text/css">
        .ui-flex {            
        display: -webkit-box !important;            
        display: -webkit-flex !important;            
        display: -ms-flexbox !important;            
        display: flex !important;           
         -webkit-flex-wrap: wrap;            
         -ms-flex-wrap: wrap;            
         flex-wrap: wrap
        }       
         .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {           
          box-sizing: border-box
        }       
         .ui-flex.justify-center {            
         -webkit-box-pack: center;            
         -webkit-justify-content: center;            
         -ms-flex-pack: center;            
         justify-content: center
        }        
        .ui-flex.center {            
        -webkit-box-pack: center;            
        -webkit-justify-content: center;            
        -ms-flex-pack: center;            
        justify-content: center;           
         -webkit-box-align: center;           
          -webkit-align-items: center;           
           -ms-flex-align: center;            
           align-items: center
        }    
        </style>
        html代码：
<p class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <p class="cell">
	<img alt="" src="jgylogo3.gif" style="" />
    </p>
</p>

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS, um das Bild vertikal und horizontal zu zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!