Wie erstelle ich einen anklickbaren Link für ein gesamtes HTML-Div, das ein Bild enthält?

So erstellen Sie einen Ankerlink für ein gesamtes HTML-Div

In HTML/CSS kann das Erstellen eines Links für ein gesamtes div-Element durch verschiedene Ansätze erreicht werden. Die in der Abfrage angegebene Anforderung besteht darin, einen Link für ein Div zu erstellen, das ein Bild enthält, das innerhalb seines übergeordneten Divs vertikal zentriert ist. Während die anfängliche Lösung mit verschachtelten Divs und Inline-Stilen machbar erscheint, steht sie im Widerspruch zu gültigen HTML-Codierungsstandards.

Um das Problem zu beheben, stehen mehrere Optionen zur Verfügung:

1. Verwenden eines Inline-Block-Elements innerhalb eines Anker-Tags

`

<br><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"></a></p>
<pre class="brush:php;toolbar:false"><span style="display: inline-block; height: 235px; width: 184px; border: 2px solid black; text-align: center;">
    <img src="myimage.jpg" height="62" width="180">
</span>

`

Diese Methode stellt sicher, dass das Bild innerhalb des übergeordneten Div vertikal zentriert bleibt, das jetzt ein Inline-Block-Element ist, das in einem Ankertag eingeschlossen ist.

2. JavaScript für die Klickverarbeitung verwenden

`

<br><div id="parentdivimage" style="cursor: pointer;" onclick="window.location='https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';"></p>
<pre class="brush:php;toolbar:false"><div id="childdivimage" style="position: absolute; top: 50%; height: 62px; margin-top: -31px;">
    <img src="myimage.jpg" height="62" width="180">
</div>