jquery - 如何使用 HTML/CSS 使按钮可点击？它需要与图像上的标题一起居中

Question

我正在尝试在链接到同一站点内另一个页面的图像上创建一个按钮...我在编码方面不是很有经验，但能够在网上找到一些帮助我创建我的东西的东西需要。主要问题是我无法使按钮可点击，并且不确定在何处插入将链接到我要指向的页面的代码。 这是我到目前为止所拥有的 - HTML:

<div class="albumimagewrap">
<img src="https://static1.squarespace.com/static/55d3ad3ee4b0adc8c326fe3f/t/57967922e6f2e14eefb8c308/1469479203582/Artboard+1.png?format=1000w" width="100%" height="100%">

<input type="h1" class="albumtitleimg" value="INNER CIRCLE">
<input type="p" class="albumtextimg" value="Debut Album Available Now">
<input type="button" class="albumbutton1" value="LISTEN">
</div>

CSS:

.albumimagewrap {
position:relative;left:0;top:0;
width: 100%;
height: 100%;
padding-top:0%
}

.albumtitleimg {
display: block;
position:absolute;
margin: auto;
width: 250px;
top:20%;right:0%;left:0%;
text-align: center;
font-size: 25px;
color:#ffffff;
background-color:transparent;
border: 0px;
}

.albumtextimg {
display: block;
position:absolute;
margin:auto;
width: 250px;
top:40%;right:0%;left:0%;
text-align: center;
font-size: 14px;
color:#ffffff;
background-color:transparent;
border: 0px;
}

.albumbutton1 {
display: block;
position:absolute;
margin:auto;
top:60%;right:0%;left:0%;
width: 240px;
height: 50px;
text-align: center;
background-color:transparent;
color: #ffffff;
border: 2px solid #BD9F6C;
}

我是新来的，所以我不能上传图片，但是你可以在这里看到图片/按钮:ZL Bandsite - Banner Img with Button

非常感谢任何帮助!

Answer 1

一般规则是，如果单击元素导致加载新页面，请使用 anchor 。因此，对于您的情况，我将使用以下内容:

<a href="new-page.html" class="albumbutton1">
  <span>LISTEN</span>
</a>

anchor 自然链接到新页面，因此无需创建额外的 JavaScript。

为了使 anchor 文本水平和垂直居中，我添加了以下内容:

.albumbutton1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这是一个演示:https://jsfiddle.net/mkwmsd2d/