Besoin d'aide pour centrer le contenu et rendre les liens d'images cliquables

Question

Essentiellement, j'ai besoin que l'image et le titre soient centrés sur l'écran, mais j'ai également 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 des 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'obtiens toujours la même erreur. J'ai essayé de redimensionner l'image à différentes tailles, j'ai essayé

P粉649990163 · Answer

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 sur inline-block. Cela les oblige à contenir entièrement l'image (voir Pourquoi 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 central est obsolète depuis longtemps et ne doit pas être utilisé.

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


  
  
  
  
  
  Hello, world!



  
    Pills