Wie zeigen Sie ein Bild mit dem text, vor es und nach es in die vertikale Mitte des Bildes?

Auf einer meiner Seiten, ich möchte anzeigen, um eine einfache Bildergalerie mit einem "VORHERIGEN" und "NÄCHSTEN" text-link vertikal zentriert ausgerichtet vor und nach jedem Bild (respectively), so dass meine Benutzer leicht zu navigieren zwischen den Bildern.

Wie kann ich das tun? Egal was ich versuche, ich kann einfach nicht damit es funktioniert.

hast du ein Beispiel für einen code, mit dem Sie arbeiten?
So etwas wie: melin-y-derw.com/our-work/bedrooms ?
Ich verwende eine Tabelle mit 3 Spalten und mit valign tun die vertikale Ausrichtung. Erste, ich denke über einen Tisch für diese ist falsch, aber ich kenne keine Art, und zweitens, selbst das funktioniert nicht. Irgendwelche Ideen? Danke!
Es muss nicht annähernd so schick wie die. In anderen Worten, die "Vorherige" und "weiter" - links müssen nicht überlappen, das Bild, die Sie benötigen, um vor und nach ihm auf der gleichen Linie, gerade Linie mit der vertikalen Mitte des Bildes, dessen Breite und Höhe ständig ändern). Irgendwelche Ideen? Danke!
Die Idee war für Sie, Blick auf die CSS-und sehen, wie es gemacht wurde, es sieht vielleicht schön aus, aber wie es gemacht wird ist Recht einfach, wie in meiner Antwort 😉

InformationsquelleAutor ProgrammerGirl | 2012-09-23

2

Was ist Los mit die einfachste Lösung?
```
<div class="myGallery">
    <span>before</span>
    <img src="http://www.spiraluniverse.com/uploads/tx_templavoila/image1.jpg">
    <span>after</span>
</div>
```
CSS
```
.myGallery img {
    vertical-align: middle;
}
```
Hier sind die Ergebnisse:
http://jsfiddle.net/6e87c/embedded/result/

Es scheint, dass manchmal die einfachste Lösung übersehen. 🙂 Das hat wunderbar funktioniert, scheint zu sein, kompatibel mit den meisten Browsern und benötigt am wenigsten code. Gewinnen Sie! (Bitte Bearbeiten Sie Ihre HTML zu beheben die fehlende Zitat nach "myGallery.)

InformationsquelleAutor Andrei Volgin
2

Hier ist eine einfache Technik:

HTML
```
<div>
    <span>before</span>
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <span>after</span>
</div>
```
CSS
```
div span,
div img {
    display: inline-block;
    vertical-align: middle;
}
```
http://jsfiddle.net/mGpz6/

Dies funktioniert, da können Sie Steuern, die vertical-align Wert für inline-block Elemente. Sie können nicht tun, dass für die regelmäßige inline Elemente, werden Sie immer ausrichten an der (text -) Grundlage, die ist wahrscheinlich das, was Sie erlebt haben, auf Ihrer website.

Interessant. Wird sich dies auf alle Bilder auf der Website? Ich will nur diese beeinflussen die spezifischen Galerie-Bilder (class="Galerie").
So passen Sie die CSS-Selektoren entsprechend, z.B. .gallery img, .gallery span statt div img, div span.
Es wird sich auf alle Bilder, die den Kriterien entsprechen, werden Sie brauchen, um es genauer zu definieren. Hüten Sie sich vor inline-block, als wenn es weiße Raum (die es in seinem Beispiel), es kann eine Lücke zwischen den Elementen (aus der Hand, wenn Sie hintergrund-Farbe etc.)
Danke, so wäre dies der direkteste, "kompatibel" und "weniger-hacky" Weg, dies zu erreichen?
Gut, ich mag diese Lösung, aber nichts ist perfekt. Sie werden bemerken, dass zum Beispiel inline-block Elemente betroffen sind, die durch whitespace um Sie herum in den source-code. Nicht sicher, ob das ein problem für Sie ist oder nicht. Da für die Kompatibilität, alte Versionen von Firefox (vor 3.5, glaube ich) hatte Probleme damit, aber andere als, dass es weitgehend unterstützt werden.

InformationsquelleAutor bfavaretto
0

Können Sie so etwas wie auf den next /prev-links (wenn Sie eine Klasse von sagen .neben und .prev):
```
.gallery-container {
  position: relative;
}
.next { right: 0; }
.prev { left: 0; }
.next, .prev {
  position: absolute;
  top: 45%;
}
```
Den Elementen .neben und .prev absolut positioniert werden, um deren Eltern.Galerie-container), und Sie werden versetzt, Ihre Position von der top-Wert (das ist ein Prozent weniger als 50, wenn das element ist 10% hoch, wäre es top: 45%, wenn es 20% in der Höhe, es ist top: 40%, usw).

Passen Sie einige der Werte leicht, wie die Links-und rechts-Eigenschaften entsprechend mehr genau an die Breite des .neben /.prev-element. Wenn .prev 40pixels breit, dann Links: -40px; ist, was Sie brauchen.

Diese Lösung ist sehr anpassbar und unterstützt in so ziemlich allen Browsern.

Beispiel HTML:
```
<div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>
```
Danke. Können Sie bitte erklären, was das tut und warum Sie mit solch einer scheinbar willkürlichen Zahl (z.B. 45%)? Diese Lösung ist weitgehend kompatibel (z.B. weniger "hacky") als bfavaretto die Lösung von oben?
Hilft das?
Danke für die Erklärung. Aber was ist, wenn das element der Höhe ändert, wie würde ich wissen, ob 45% oder ein anderer Wert? Die Galerie hat Bilder von verschiedenen Höhen/breiten-und ich muss den text immer zentriert zu jedem einzelnen Bild.
Es ist die Höhe der .neben / .prev-element, nicht das Bild selbst. die % macht es so wird es sein, ausgerichtet auf die Mitte des umschließenden Blocks. Die enthaltenden block erhöhen / verringern der eigenen Höhe automatisch, wenn das Bild verändert sich im inneren, um Platz zu machen für Sie oder entfernen Sie nicht benötigte Zimmer.
Aber warum verändert sich die Höhe des nächsten / vorherigen elements, egal ob Sie immer weniger als die Höhe des Bildes?

InformationsquelleAutor David
0

Beachten Sie, dass vertical-align Eigenschaft ist inappliccable zu block-level-Elemente.

Wäre es akzeptabel, verwenden Sie absolute Positionierung relativ zu der Galerie-container in diesem Szenario. Nachdem das getan ist, verwenden Sie Ränder, passen Sie die position der Tasten, dies würde die Kraft, die Tasten zu bleiben, auch wenn der div-container bekommt ausgestreckt senkrecht (z.B. um Platz für ein größer Bild)
```
.gallery {/*our container element*/
  position:relative;
}
.btn-prev, .btn-next {
  width:40px;height:40px;/*we know the buttons will never change size dynamically*/
  margin:-20px 0;/*so we can use explicit px value to shift them as needed*/
  position:absolute;
  top:50%;
}
.btn-prev {/*remember to correctly position the buttons horizontally*/
  left:0;
}
.btn-next {
  right:0;
}
```
Fummelte

Interessant. Dies funktionierte, aber die beiden Tasten waren auf jeden extrem von der Seite, statt rechts neben dem Bild auf den gegenüberliegenden Seiten. Wie kann ich statische links neben dem Bild, so dass Sie nicht bewegen, wenn die Seite geändert wird? Danke.
ähm, nur passen die container Verhalten? wenn Sie brauchen, es zu wickeln eng um das Bild dieser funktionieren würde

InformationsquelleAutor o.v.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.