J'ai essayé de créer un site simple comme Ceci . Cependant, je me rends compte que je suis mauvais au positionnement CSS pour le bouton ne se présente jamais comme prévu.
Comme vous l'avez peut-être deviné, je veux que le bouton (#play_button) soit afficher exactement sur l'image du bouton de lecture en arrière-plan. Quelqu'un peut-il s'il vous plaît dites-moi comment cela doit être fait?
mon code CSS: Une seule chose plus, le problème se produisant est que si j'avais la taille de la fenêtre du navigateur, l'image passe à une nouvelle position. Problème résolu :) ici, dans cet exemple , vous pouvez voir comment le bouton reste au centre de la page, même si vous avez la taille de la fenêtre du navigateur.Aussi toujours , vous pouvez modifier le mise à jour:
Mise à jour:
gauche et top offsets pour obtenir les résultats souhaités. Voici le code .
4 Réponses :
Essayez d'utiliser un positionnement absolu, plutôt que du positionnement relatif
Ceci devrait vous rapprocher - vous pouvez ajuster en peaufinant des marges ou des positions de haut / gauche
Il semble un peu quel centre
@Gaurang Tandon Je vous suggérerais de vérifier ce jsfiddle.net/jzkye/1 ce serait mieux Si vous avez une certaine largeur et une hauteur afin que vous puissiez obtenir une meilleure réponse.
J'utiliserais un positionnement absolu:
Donc, l'astuce ici consiste à utiliser le positionnement absolu où xypx est la moitié de la taille de votre image, dans mon cas, l'image était un carré. Bien sûr, dans ce cas maintenant obsolète, l'image doit également modifier sa taille proportionnellement en réponse au redimensionnement de la fenêtre pour pouvoir rester au centre sans regarder hors de proportion. CALC Comme ceci:
Veuillez afficher votre code HTML et chaque fois que possible, un exemple jsfiddle.net également. Et demander des plugins, des tutoriels et des outils sont hors tension.
@ j08691 OK, vraiment désolé d'avoir disparu, je ne savais pas ça. En ce qui concerne l'exemple d'aperçu, j'ai un EXEMPLE PLUNKER , mais je téléchargerai un jsfiddle aussi comme vous le dites. Et ajouter le code HTML aussi bien, juste une minute.
Utilisez un positionnement absolu
Ok, merci j'ai la réponse. Merci a tous pour votre aide.
Si vous avez une solution qui diffère des réponses déjà fournies, postez une réponse. Ne modifiez pas votre question pour contenir la solution et la gifle résolue dessus. Sinon, acceptez l'une des réponses les plus proches de la solution.
@Gaurangtandon, bon de savoir que vous avez résolu vous-même vous-même, dans ce cas, veuillez fournir une solution de travail et une démonstration pour les personnes visitant cette page à l'avenir.
@Anujkaithwas ok, je mets ça.
Hmm ... je vais le faire demain.Une peu occupé maintenant.
@cimmanon a ajouté.