html - 使用HTML和CSS设置正确的位置？

我试图以此作为将“ HOME”图像居中到第一个单元格的方法。我很近，但是一直表现得很奇怪。另外...我该如何做才能使按钮打开链接？当前的外观。

CSS和HTML，因为我不能“发布两个以上的链接。”：https://hastebin.com/raw/obibotiket

what it looks like now

最佳答案

.fhNav {
  width: 893px;
  height: 90px;
  background: url(../images/navBack.png);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-right: 10px;
  padding-bottom: 40px;
  background-repeat: no-repeat;
  border: 1px red solid;
  display: flex;
  align-items: center;
}

.homeBtn{
  width: 137px;
  height: 90px;
  position: relative;
  margin-left: 12px;
  background: url("../images/navbtn/homebtn.png") no-repeat;
  background-repeat: no-repeat;
  border: 1px red solid;
  margin-top: 40px;
}
.homeBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="fhNav" id="nav">
  <div class="homeBtn">
      <a href="https://www.factionhouse.org/"></a>
  </div>
</div>

要使按钮可点击，请尝试以下操作

.homeBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}