提问人：ai.botzzz 提问时间：7/22/2023 最后编辑：isherwoodai.botzzz 更新时间：7/22/2023 访问量：36
需要帮助使内容居中并使图像链接可点击
Need help centering content and making image links clickable
问：
从本质上讲，我需要图像和标题在屏幕中居中，但我还需要图像可点击并打开链接。我相信我有正确的代码可以做到这一点，但我仍然遇到这两个问题。图像也有 2 种不同的尺寸，因此这也使它变得困难。我只是试着把红色药丸弄得更小，把蓝色药丸弄得更大，相对于它们原来的大小。
不要担心其他 3 张图像的背景关键帧。我只需要标题居中以及红色和蓝色药丸图像的帮助。
我尝试使用在线代码，但我仍然遇到相同的错误。我尝试过将图像调整为不同的大小，我尝试过不同的居中技术，但似乎无法理解。
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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>答：
0赞
isherwood
7/22/2023
#1
我有点猜到你的目标，但你不需要将图像容器居中对齐吗？我已经在选择器上这样做了。#background
然后，我将大小调整任务转移到锚点，并将其 display 属性设置为 。这迫使它们完全包含图像（请参阅为什么锚标记不采用其包含元素的高度和宽度）。我还将图像的最大宽度设置为 100%。这一切都是在CSS中完成的，因为内联样式效率低下，需要避免。inline-block
图像大小不相等。您可以使用 CSS 以多种方式处理它，但最好的解决方法是调整它们的大小以匹配。我会将较大的一个减小到与较小的大小相同。
仅供参考，您的风格元素在头部和身体元素之外。这是无效的 HTML。把它放在头部元件里面。
此外，center 元素早已弃用，不应使用。
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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>评论
0赞
ai.botzzz
7/22/2023
非常感谢您的帮助，即使在居中对齐之后，我认为它仍然偏离中心，因为图像的大小略有不同，这就是为什么它看起来仍然有点奇怪。无论如何，我主要担心的是 href 链接不起作用，因为在图像中是不可点击的。
0赞
Andy
7/22/2023
#2
它可能就像在标记中添加不同的 flex 容器一样简单，一个在主容器上，一个用于保存锚点/图像。
这里的 和 容器都设置为 while is 。然后，您可以使用 CSS 调整图像的宽度，并正确调整它们的比例。main.pillsflexmainflex-direction: column
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>
评论