Comment afficher une image avec le texte avant et après dans le milieu vertical de l'image?

Sur un de mes sites, je souhaite afficher une galerie d'images simple avec un "PRÉCÉDENT" et "SUIVANT" lien texte verticalement aligné au centre avant et après chaque image (respectivement) de sorte que mes utilisateurs peuvent facilement naviguer entre les images.

Comment puis-je le faire? Peu importe ce que j'ai essayer, j'ai tout simplement impossible de le faire fonctionner.

  • avez-vous un exemple de code que vous travaillez avec?
  • Quelque chose comme: melin-y-derw.com/our-work/bedrooms ?
  • Je suis à l'aide d'un tableau avec 3 colonnes et en utilisant valign à faire l'alignement vertical. Tout d'abord, je pense que l'utilisation d'une table de ce qui est faux, mais je ne sais pas de toute façon, et deuxièmement, même qui ne fonctionne pas. Des idées? Merci!
  • Il n'a pas à être n'importe où près aussi chic que ça. En d'autres termes, le "précédent" et "suivant" liens n'ont pas besoin de chevauchement de l'image, ils ont besoin d'être avant et après sur la même ligne, juste aligné avec le centre vertical de l'image (dont la largeur et la hauteur changent constamment). Des idées? Merci!
  • L'idée est pour vous de regarder le CSS et voir comment c'était fait, il peut sembler compliqué, mais la façon dont c'est fait est assez basique, comme on le voit dans ma réponse 😉
InformationsquelleAutor ProgrammerGirl | 2012-09-23
  1. 2

    Quel est le problème avec la solution simple et efficace?

    <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;
}​

    Voici les résultats:
    http://jsfiddle.net/6e87c/embedded/result/

    • Il semble que, parfois, la solution la plus simple est négligé. 🙂 Cela a fonctionné à merveille, semble compatible avec la plupart des navigateurs, et nécessite le moins de code. Vous gagnez! (Veuillez modifier votre code HTML pour résoudre le guillemet manquant après "myGallery.)
    InformationsquelleAutor Andrei Volgin
  2. 2

    Voici une technique simple:

    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/

    Cela fonctionne parce que vous pouvez contrôler la vertical-align valeur pour inline-block éléments. Vous ne pouvez pas le faire régulièrement inline éléments, ils seront toujours s'aligner à l' (texte) de référence, ce qui est probablement ce que vous rencontrez sur votre site web.

    • Intéressant. Cela affecte toutes les images sur le site? Je ne veux ce à affecter la galerie spécifique images (class="galerie").
    • Afin de régler les sélecteurs CSS en conséquence, par exemple, .gallery img, .gallery span au lieu de div img, div span.
    • Il aura une incidence sur toutes les images qui correspondent aux critères, vous aurez besoin pour le rendre plus précis. Méfiez-vous des inline-block comme si il y a un espace blanc (ce qui est dans son exemple), il peut laisser un espace entre les éléments (mise en évidence quand ils ont des couleurs d'arrière-plan, etc)
    • Merci, alors serait-ce la plus directe, "compatible", et moins "hacky" façon de régler ce problème?
    • Eh bien, je préfère cette solution, mais rien n'est parfait. Vous remarquerez, par exemple, que inline-block éléments sont affectés par des espaces qui les entourent dans le code source. Pas sûr que ce sera un problème pour vous ou pas. Comme pour la compatibilité, les anciennes versions de Firefox (avant de 3.5, je crois) avait des problèmes, mais d'autres que c'est largement pris en charge.
    • Hmm...je suis à la recherche d'une solution compatible depuis que je tiens ce aussi pour travailler sur les anciens téléphones mobiles qui accèdent au site. Je suppose que je devrais avez spécifié que dans mon OP.
    • Je ne sais pas beaucoup sur le navigateur mobile de soutien (ils peuvent être un peu délicat), mais vous pouvez google pour les tableaux de compatibilité de inline-block pour être sûr, et, bien sûr, essai sur les périphériques cibles. Comme pour les navigateurs de bureau, je pense qu'il est sûr à utiliser.

    InformationsquelleAutor bfavaretto
  3. 0

    Vous pouvez utiliser quelque chose comme sur la next /prev de liens (si ils ont une classe de dire .la prochaine et de .prev):

    .gallery-container {
  position: relative;
}
.next { right: 0; }
.prev { left: 0; }
.next, .prev {
  position: absolute;
  top: 45%;
}

    Les éléments .la prochaine et de .prev sont positionnés de façon absolue à leurs parents.galerie-conteneur), et ils sont compensés sur leur emplacement par le haut de la valeur (qui est un % de moins de 50 ans, si l'élément est de 10% de haut, ce serait top: 45%, si c'est 20% de la hauteur, c'est top: 40%, etc).

    Vous aurez besoin d'ajuster certaines des valeurs légèrement, comme la gauche et la droite propriétés pour correspondre plus exactement à la largeur de l' .suivant /.prev élément. Si .prev est 40pixels large, puis à gauche: -40px; est ce que vous aurez besoin.

    Cette solution est très personnalisable et pris en charge dans à peu près tous les navigateurs.

    exemple HTML:

    <div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>
    • Merci. Pouvez-vous nous expliquer ce que c'est et pourquoi vous utilisez une telle apparence-nombre arbitraire (par exemple, 45%)? Est-ce la solution la plus largement compatible (par exemple, moins "hacky") que bfavaretto la solution ci-dessus?
    • Cela vous aide?
    • Merci pour l'explication. Mais que faire si la hauteur d'élément change, comment pourrais-je savoir si l'utilisation de 45% ou une autre valeur? La galerie d'images de différentes hauteurs/largeurs et j'ai besoin que le texte soit toujours centré à chaque image.
    • C'est la hauteur de l' .suivant / .prev élément, et non l'image elle-même. l' % fait de sorte qu'il sera aligné au centre du bloc contenant. Le bloc contenant une hausse / baisse de sa propre hauteur automatiquement lorsque l'image change à l'intérieur, pour faire de la place ou à supprimer les chambre.
    • Mais pourquoi la hauteur de la next / prev éléments d'importance si ils vont toujours être inférieure à la hauteur de l'image?
    • Ok permet de se rendre à l'maths. Un centre parfait d'un des éléments de la hauteur est de 50% oui? Si l'on top: 50%; cependant, cela signifie que la haut de page de la liaison, qui est au milieu, pas le moyen de le lien, l'amenant à être pas exactement dans le centre. Pour l'obtenir dans le centre, vous prenez de la hauteur de l'élément que vous essayez de alignées à la verticale, le diviser par 2, et la soustraire de 50.
    • Merci, ça a du sens. Permettez-moi de tester les solutions présentées ici pour un maximum de compatibilité avant l'attribution de la réponse correcte.
    • Pas de problème, si vous êtes bloqué, n'hésitez pas à me demander quoi que ce soit dans le chat.
    • Je viens d'essayer votre HTML & CSS exemple ci-dessus, et il ne fonctionne pas comme prévu. Les deux "Prev" et l'image ont été alignés tout le chemin à gauche (avec "Prev" chevauchement de l'image), et "autre" a été tout le chemin à l'extrême droite. Des idées?
    • laissez-nous continuer cette discussion dans le chat
    • Vous avez été d'une grande aide, et je l'apprécie vraiment! Cependant, il semble Andrei est venu avec la plus simple, la plus directe, la solution, donc je l'ai lui a décerné la réponse. Vous êtes un atout pour le faire. 🙂

    InformationsquelleAutor David
  4. 0

    Gardez à l'esprit que vertical-align propriété est inappliccable pour les éléments de niveau bloc.

    Il serait acceptable d'utiliser le positionnement absolu par rapport à la galerie conteneur dans ce scénario. Après que ce soit fait utiliser des marges pour ajuster la position des boutons, ce serait forcer les boutons de rester en place, même si la div conteneur s'étend verticalement (par exemple, pour accueillir un plus haut de l'image)

    .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;
}

    Trafiqué

    • Intéressant. Cela a fonctionné, mais les deux boutons sont sur chaque extrême de la page, au lieu de droite à côté de l'image sur les côtés opposés. Comment puis-je faire des liens statique à côté de l'image de telle sorte qu'ils ne bougent pas lorsque la page est redimensionnée? Merci.
    • euh, il suffit de régler le conteneur de comportement? si vous avez besoin pour envelopper autour de l'image ceci serait le travail
    InformationsquelleAutor o.v.