Detaillierte grafische und textliche Erläuterung von fünf Methoden zur horizontalen und vertikalen Zentrierung von Bildern (mit Code)

Beim Seitenlayout ist es häufig erforderlich, die Position von Bildern zu verarbeiten. In diesem Artikel geht es hauptsächlich um die Verwendung von CSS, um eine horizontale Zentrierung von Bildern sowie eine horizontale und vertikale Zentrierung zu erreichen von Bildern. Praktische und interessierte Freunde, Sie können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

1. text-align: center erreicht die horizontale Zentrierung von Bildern

text-align wird im Allgemeinen für die horizontale Zentrierung von Text verwendet, kann aber auch für Bilder verwendet werden. Der Code lautet wie folgt:

CSS-Teil:

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

HTML-Teil:

<div>
    <img  src="/static/imghw/default1.png"  data-src="img/logo.png"  class="lazy"   / alt="Detaillierte grafische und textliche Erläuterung von fünf Methoden zur horizontalen und vertikalen Zentrierung von Bildern (mit Code)" >
</div>

Rendering:

2. line-height und text-align: center erreichen eine horizontale und vertikale Zentrierung des Bildes

Setzen Sie den Wert von line-height gleich der Höhe, um eine vertikale Zentrierung zu erreichen , text-align: center kann eine horizontale Zentrierung erreichen. Der HTML-Teil ist derselbe, der CSS-Code lautet wie folgt:

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

Rendering:

3 :table und display:table-cell implementieren die horizontale und vertikale Zentrierung von Bildern

Verwenden Sie die Tabellenmethode, um display:table, display:table-cell festzulegen, aber diese Methode ist nicht mit IE6/IE7 kompatibel . Sie können es verwenden, wenn Sie IE67 nicht unterstützen müssen. Bei dieser Methode wird der

CSS-Stil direkt in das Tag geschrieben und der Code lautet wie folgt:

<div   style="max-width:90%">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="/static/imghw/default1.png"  data-src="img/logo.png"  class="lazy"    / alt="Detaillierte grafische und textliche Erläuterung von fünf Methoden zur horizontalen und vertikalen Zentrierung von Bildern (mit Code)" >
    </span>
</div>

4. Durch die Position wird das Bild horizontal und vertikal zentriert.

Positionierungsmethode: Legen Sie die relative Positionierung im übergeordneten Feld und die absolute Positionierung im untergeordneten Feld fest, die als „übergeordnetes relatives untergeordnetes Absolut“ bezeichnet wird. Stellen Sie die linke Seite des Bildes auf 50 % und die obere Seite auf 50 % ein (Hinweis: Dies bedeutet keine vertikale Zentrierung. Sie müssen außerdem margin-left auf die halbe Länge des Bildes und margin-top auf die Hälfte einstellen). die Höhe des Bildes. Der HTML-Teil ist derselbe, der CSS-Code lautet wie folgt; Zentrierung ohne Wiederholung, um die horizontale und vertikale Zentrierung des Bildes zu erreichen.

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

Zusammenfassung: Oben werden 5 Methoden zum Zentrieren von Bildern vorgestellt, von denen jede unterschiedlich ist. Die spezifische Methode hängt von den persönlichen Gewohnheiten ab Anfänger können es selbst ausprobieren. Ich hoffe, es kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonDetaillierte grafische und textliche Erläuterung von fünf Methoden zur horizontalen und vertikalen Zentrierung von Bildern (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!