Need help centering content and making image links clickable

Question

Essentially I need the images and header to be centered in the screen but I also need the images to be clickable and open links. I believe I have the right code to do so but I'm still having both problems. The images are also 2 different sizes so that also makes it difficult. I simply tried making the red pill smaller and blue pill larger, relative to their original sizes.

Don't worry about the background key frames with the 3 other images. I just need help with the centering of the header, and the red and blue pill images.

I tried using code from online but I'm still getting the same errors. I've tried resizing the images to different sizes, I've tried different centering techniques but cant seem to get it.

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <div id="background">
    <h1 id="header">Pills</h1>
    
    <center>
      <a href="google.com"><img src="https://i.stack.imgur.com/D8d6J.png" style="width:35%;height:15%;"></a>
      <a href="google.com"><img src="https://i.stack.imgur.com/wPa6r.png" style="width:40%;height:20%;"></a>
    </center>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

isherwood · Answer 1 · 2023-07-21T16:54:20.823

I'm guessing somewhat as to your goal, but don't you just need to center-align the image container? I've done so on the #background selector.

I've then moved sizing duty to the anchors and set their display property to inline-block. This forces them to contain the images completely (see Why anchor tag does not take height and width of its containing element). I've also set max-width to 100% for the images. This is all done in CSS since inline styles are inefficient and to be avoided.

The images are unequal in size. You can handle that any number of ways with CSS, but the best fix is to resize them to match. I would reduce the larger one to be the same size as the smaller.

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

Also, the center element is long 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;
}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <div id="background">
    <h1 id="header">Pills</h1>

    <a href="https://google.com"><img src="https://i.stack.imgur.com/D8d6J.png"></a>
    <a href="https://google.com"><img src="https://i.stack.imgur.com/wPa6r.png"></a>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

Thankyou very much for the help, even after center aligning I think its still off centered because the images are slightly different sizes and that's why it still looks a bit weird. Regardless, what I'm mainly concerned about however is that the href link is not working, as in the image is not clickable. — ai.botzzz, Jul 21 '23 at 16:53
Answer updated. In the future, ask only one question per post. See [ask] and take the [tour] so you know how this site works. — isherwood, Jul 21 '23 at 16:54

score 0 · Answer 2 · answered Jul 21 '23 at 17:23

It might be as simple as adding different flex containers to your markup, one on the main container, and one to hold the anchors/images.

Here both the main and .pills containers are set as flex while main is flex-direction: column. You can then use CSS to adjust the width of the images, and proportion them properly.

main {
  flex-direction: column;
}

main, .pills {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

img { width: 100px; aspect-ratio: 3 / 2; }

<main>
  <h1 id="header">Pills</h1>
  <section class="pills">
    <a href="https://google.com/search?q=red">
      <img src="https://i.stack.imgur.com/D8d6J.png" />
    </a>
    <a href="https://google.com/search?q=blue">
      <img src="https://i.stack.imgur.com/wPa6r.png" />
    </a>
  </section>
</main>

Need help centering content and making image links clickable

2 Answers2