Besoin d'aide pour centrer le contenu et rendre les liens d'images cliquables-Questions et réponses sur le réseau chinois PHP

Essentiellement, j'ai besoin que l'image et le titre soient centrés sur l'écran, mais j'ai aussi besoin que l'image soit cliquable et ouvre le lien. Je pense avoir le bon code pour ce faire, mais j'ai toujours ces deux problèmes. Les images sont également disponibles en deux tailles différentes, ce qui rend également les choses difficiles. J'ai juste essayé de rendre les pilules rouges plus petites et les pilules bleues plus grandes (par rapport à leur taille d'origine).

Ne vous inquiétez pas des images clés d’arrière-plan pour les 3 autres images. J'ai juste besoin d'aide pour centrer le titre et les images des pilules rouges et bleues.

J'ai essayé d'utiliser le code en ligne mais j'ai toujours la même erreur. J'ai essayé de redimensionner l'image à différentes tailles, essayé différentes techniques de centrage, mais je n'arrive pas à le faire fonctionner.

body { margin: 0; overflow: hidden; } #content { position: relative; z-index: 2; padding: 20px; text-align: center; color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 24px; } @keyframes matrix-rain { 0% { background-image: url("matrix-pride.png"); } 5% { background-image: url("matrix-stripes.png"); } 10% { background-image: url("matrix-green.png"); } 15% { background-image: url("matrix-pride.png"); } 20% { background-image: url("matrix-stripes.png"); } 25% { background-image: url("matrix-green.png"); } 30% { background-image: url("matrix-pride.png"); } 35% { background-image: url("matrix-stripes.png"); } 40% { background-image: url("matrix-green.png"); } 45% { background-image: url("matrix-pride.png"); } 50% { background-image: url("matrix-stripes.png"); } 55% { background-image: url("matrix-green.png"); } 60% { background-image: url("matrix-pride.png"); } 65% { background-image: url("matrix-stripes.png"); } 70% { background-image: url("matrix-green.png"); } 75% { background-image: url("matrix-pride.png"); } 80% { background-image: url("matrix-stripes.png"); } 85% { background-image: url("matrix-green.png"); } 90% { background-image: url("matrix-pride.png"); } 95% { background-image: url("matrix-stripes.png"); } 100% { background-image: url("matrix-green.png"); } } #background { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; background-size: cover; background-position: center; animation: matrix-rain 10s linear infinite; } #header { font-family: fantasy; color: white; text-align: center; font-size: 400%; margin-top: 50px; }

      Hello, world! 
   Pills

body { margin: 0; overflow: hidden; } #content { position: relative; z-index: 2; padding: 20px; text-align: center; color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 24px; } @keyframes matrix-rain { 0% { background-image: url("matrix-pride.png"); } 5% { background-image: url("matrix-stripes.png"); } 10% { background-image: url("matrix-green.png"); } 15% { background-image: url("matrix-pride.png"); } 20% { background-image: url("matrix-stripes.png"); } 25% { background-image: url("matrix-green.png"); } 30% { background-image: url("matrix-pride.png"); } 35% { background-image: url("matrix-stripes.png"); } 40% { background-image: url("matrix-green.png"); } 45% { background-image: url("matrix-pride.png"); } 50% { background-image: url("matrix-stripes.png"); } 55% { background-image: url("matrix-green.png"); } 60% { background-image: url("matrix-pride.png"); } 65% { background-image: url("matrix-stripes.png"); } 70% { background-image: url("matrix-green.png"); } 75% { background-image: url("matrix-pride.png"); } 80% { background-image: url("matrix-stripes.png"); } 85% { background-image: url("matrix-green.png"); } 90% { background-image: url("matrix-pride.png"); } 95% { background-image: url("matrix-stripes.png"); } 100% { background-image: url("matrix-green.png"); } } #background { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; background-size: cover; background-position: center; animation: matrix-rain 10s linear infinite; text-align: center; } #background a { display: inline-block; max-width: 40%; } #background a img { max-width: 100%; } #header { font-family: fantasy; /* color: white; */ text-align: center; font-size: 400%; margin-top: 50px; }

répondre à tous (1)

P粉6499901632023-09-14 00:40:30 1 plancher

J'ai une idée de votre objectif, mais n'avez-vous pas besoin d'aligner le conteneur d'images au centre ? Je l'ai fait sur le sélecteur#background.

J'ai ensuite déplacé la responsabilité de redimensionnement vers l'ancre et défini sa propriété d'affichage surinline-block. Cela les oblige à contenir entièrement l'image (voirPourquoi les balises d'ancrage ne prennent pas la hauteur et la largeur de leur élément conteneur). J'ai également défini la largeur maximale de l'image à 100 %. Tout cela est fait en CSS car les styles en ligne sont inefficaces et doivent être évités.

Les images varient en taille. Vous pouvez gérer cela de plusieurs manières en utilisant CSS, mais la meilleure solution est de les redimensionner pour qu'ils correspondent. Je réduirais la plus grande taille à la même taille que la plus petite.

Pour information, vos éléments de style sont en dehors des éléments de tête et de corps. Ce code HTML n'est pas valide. Mettez-le à l’intérieur de l’élément de tête.

De plus, l'élément centralest obsolète depuis longtemps et ne doit pas être utilisé.