Need help centering content and making image links clickable

Question

Essentially, I need the image and title to be centered on the screen, but I also need the image to be clickable and open the link. I believe I have the correct code to do this, but I'm still having these two issues. The images also come in two different sizes, so that makes it difficult as well. I just tried making the red pills smaller and the blue pills larger (relative to their original size). Don't worry about the background keyframes for the other 3 images. I just need help with centering the title and the red and blue pill images. I tried using the online code but still getting the same error. I have tried resizing the image to different sizes, tried

P粉649990163 · Answer

I have a guess at your goal, but don't you need to center align the image container? I've done this on the #background selector.

I then moved the resizing responsibilities to the anchor and set its display property to inline-block. This forces them to contain the image entirely (see Why anchor tags don't take the height and width of their containing element). I also set the maximum width of the image to 100%. This is all done in CSS because inline styles are inefficient and should be avoided.

Images vary in size. You can handle this in a number of ways using CSS, but the best solution is to resize them to match. I would reduce the larger size to the same size as the smaller one.

FYI, your style elements are outside the head and body elements. This is invalid HTML. Put it inside the head element.

Additionally, the center element is long is deprecated and should not be used.

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

Need help centering content and making image links clickable

reply all(1)I'll reply