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:
`
<br><a href="//m.sbmmt.com/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"></a></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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.
`
<br><div id="parentdivimage" style="cursor: pointer;" onclick="window.location='//m.sbmmt.com/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>In dieser Lösung wird das übergeordnete Div in ein Element auf Blockebene umgewandelt, das auf Mausklicks reagiert. Beim Anklicken wird JavaScript verwendet, um den Browser zur gewünschten URL umzuleiten.
`
<br><div style="cursor: pointer;"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><a href="//m.sbmmt.com/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">
<div style="height: 235px; width: 184px; border: 2px solid black; text-align: center;">
<img src="myimage.jpg" height="62" width="180">
</div>
</a>< ;/div>
`
Bei diesem Ansatz wird ein zweites Div um das Ankertag herum eingeführt, das einen Cursor-Zeiger-Stil erhält. Optisch funktioniert es ähnlich wie die Inline-Block-Methode, verwendet jedoch ein Ankertag, um den Link zu verarbeiten.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen anklickbaren Link für ein gesamtes HTML-Div, das ein Bild enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Empfehlung für das Ranking von Computer-Hardware-Erkennungssoftware
Einführung in die Implementierungsmethoden für Java-Spezialeffekte
Was bedeutet USB-Schnittstelle?
Aktueller Dogecoin-Preis heute
Verwendung von while
So ändern Sie Koordinaten in Matlab
Was ist eine Mac-Adresse?
Warum fällt Localstorage so schnell aus?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
