需要帮助将内容居中并使图像链接可点击

Question

本质上，我需要图像和标题位于屏幕中央，但我还需要图像可单击并打开链接。我相信我有正确的代码来做到这一点，但我仍然遇到这两个问题。图像也有两种不同的尺寸，因此也变得很困难。我只是尝试将红色药丸变小，将蓝色药丸变大（相对于它们的原始大小）。不必担心其他3个图像的背景关键帧。我只需要有关标题居中以及红色和蓝色药丸图像的帮助。我尝试使用在线代码，但仍然遇到相同的错误。我尝试过将图像调整为不同的尺寸，尝试过

P粉649990163 · Answer

我对您的目标有所猜测，但是您不需要居中对齐图像容器吗？我已在 #background 选择器上执行了此操作。

然后，我将调整大小的职责移至锚点，并将其显示属性设置为 inline-block。这迫使它们完全包含图像（请参阅为什么锚标记不采用其包含元素的高度和宽度）。我还将图像的最大宽度设置为 100%。这一切都是在 CSS 中完成的，因为内联样式效率低下并且应该避免。

图像大小不等。您可以使用 CSS 以多种方式处理该问题，但最好的解决方法是调整它们的大小以匹配。我会将较大的尺寸缩小到与较小的尺寸相同。

仅供参考，您的样式元素位于 head 和 body 元素之外。这是无效的 HTML。将其放入 head 元素内。

此外，中心元素很长已弃用，不应使用。

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