Mitte ein Bild mit einem link drauf

Ist es möglich, Zentrum eine nur-Bild-Trog Einstellung der Klasse zu img tag ohne Nebenwirkungen? Das problem ist Folgendes: ich habe einen Anker um ein Bild. Wenn ich den folgenden CSS -

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Und diese (abgespeckte) HTML:

<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
    <img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>

den link nimmt die ganze Breite der Haupt-div. Dies bedeutet nicht nur das Bild anklickbar ist - auch der Raum um das Bild herum (eigentlich die ganze Breite) ist anklickbar. Dies wird durch die CSS -display: block.
Mitte ein Bild mit einem link drauf

Wie kann ich die center-Bild ohne die Verwendung eines übergeordneten div? Ich will nicht die ganze Fläche anklickbar.

Hintergrund:
Sie können Lesen dieses Thema. Es ist zu WordPress und dem eingebauten editor. Er generiert automatisch die Klasse aligncenter auf ein Bild (wenn der Benutzer drückt die Taste "Mitte"). Ich brauche diese für mein eigenes theme. Laut den Moderatoren dort dies sollte nur eine CSS-Frage und nicht haben zu tun mit wechselnden code in WordPress.

InformationsquelleAutor testing | 2012-05-01

-2

Zweite Antwort:

fügen Sie diese in functions.php
```
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
    //only do this on center
    if($align == 'center') {
        $html = str_replace('aligncenter', '', $html);
        $html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
    }
    return $html;
}
```
Seite nach unten, dies wird keinen Einfluss auf die bereits eingefügten Bilder...

Auch wenn Sie können, bewegen Sie bitte den Stil der <p> im stylesheet.

Das hat nicht für mich gearbeitet. Derzeit könnte ich den style für die Klasse fancybox aber ich weiß nicht, welche Nebenwirkungen auf andere verbindungen haben würde.
versuchen Sie, die a style float:left
Wenn ich mit dem code das Bild ist zentriert, aber ich habe noch die anklickbaren Bereiche um das Bild herum.
Ahh, die Sie nicht wollen, dass... nur eine Sek.
Es kann getan werden, Aber mit einem Elternteil div

InformationsquelleAutor janw

in aligncenter Klasse hinzufügen text-align:center

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

Das hat nicht etwas ändern.

InformationsquelleAutor Enve

1

Ich bin nicht vertraut mit wordpress, aber möchten Sie vielleicht, um zu versuchen, die Einstellung des Bildes und der Anker css 'display' - Eigenschaft auf 'inline-block'.

Wenn Sie begrenzt sind, ändern Sie das Dokument DOM, eine weitere option ist das hinzufügen eines "onClick" - Attribut für das Bild.

Dies ermöglicht es Ihnen, führen eine Funktion aus, sobald das Bild angeklickt wird.

So, zum Beispiel, wenn Sie wollen, einen redirect zu einer anderen Seite:
```
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
```
Und in der Seite ' s header:
```
<script type='text/JavaScript'>
    var myRedirect = function(){
        window.location.href = 'Some other location';
    }
</script>
```
Beachten Sie die style='cursor:pointer' werden, ändert sich der Maus cursor in ein "hand" - cursor.

Dies kann mit CSS keine Notwendigkeit für die Verwendung von javascript für Sie
Was beziehen Sie sich?
Sie wollen eine Antwort auf diese Frage durch die Verwendung von javascript, aber es kann getan werden nur mit css. Und ein <a> tag, bedeutete für die links, wie Sie wissen.
Der link ist nur für die Verwendung der fancybox (für eine vollständige version des thumbnail-Bild). Weiß nicht wie der code Aussehen würde, wie in diesem Fall. Die nächste Sache ist, wie befestige ich das onclick-Ereignis? Wieder mit JS?
Möglicherweise, aber da die ursprüngliche Frage poster war nicht in der Lage, es zu lösen, die mit html+css (wieder, es ist wohl möglich), ich schlug vor, diese Lösung.

InformationsquelleAutor EyalAr
1

Zu vermeiden, dass eine zusätzliche div - container oder sogar JavaScript, können Sie die Anker-Anzeige als block:

.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}

/* height and width must equal your image's values */

<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>

Live-demo: http://jsfiddle.net/performancecode/Ggk8v/

InformationsquelleAutor
1

es enthält noch ein div, aber die Art und Weise, die ich tun es ist:
```
<div class="megaman">
<a href="img/megaman.jpg"><img src="img/megaman.jpg" alt="megaman"></a>
</div>



img {
height: 125px;
width: 200px;
}

.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
```
Und ja, ich ersetzt .logo mit .megaman, weil megaman Felsen! Aber es sollte funktionieren. Ich konnte nicht herausfinden, ohne mit einem div.

InformationsquelleAutor Thinnling

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.