为什么我的导航按钮或按钮文本不会移动到中心

Why won't my nav button or button text move to the center?

本文关键字：按钮 移动 文本 我的 导航 为什么      更新时间：2023-09-26

所以我正在尝试为我的一家公司制作一个网站，这个想法是我的主页将有一个巨大的图像，中心（水平和垂直）有一个按钮，上面写着"更多！"但按钮不会居中，按钮内部的文本也不会居中，下面我将放置我的HTML代码以及我的CSS代码。

这是我的网页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Biostone Interactive | Main</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="header-image">
      <div id="header-button">
        <a href="#" id="header-button-text">More!</a>
      </div>
    </div>
    <div id="nav">
    </div>
    <div id="container">
    </div>
  </body>
</html>

这是我的 CSS：

* {
  padding: 0;
  margin: 0;
  font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
  width: 100%;
  height: 600px;
  background-color: black;
}
#header-button {
  width: 100px;
  height: 50px;
  background-color: red;
  border-radius: 4px;
  margin: 0 auto;
}
#header-button-text {
  text-align: right;
  text-decoration: none;
  color: white;
}

（请注意，此代码不完整，因为我删除了其中一些以尝试修复它）请帮助我，告诉我我做错了什么！谢谢:D

若要使文本在容器内居中，请使用text-align:center; 若要使容器居中，请使用margin-left:auto;margin-right:auto; 

#header-button {
  width: 100px;
  height: 50px;
  background-color: red;
  border-radius: 4px;
  margin: 0 auto;
  text-align: center;
  margin-left: auto;margin-right:auto;
}
#header-button-text {
  text-decoration: none;
  color: white;
}
将

标题按钮 CSS 更改为：

#header-button {
  position:absolute;
  top:50%;
  left:50%;
  margin-top: -25px;
  margin-left: -50px;
  width: 100px;
  height: 50px;
  background-color: red;
  border-radius: 4px;
}
边距

值需要是维度属性的一半，因此如果更改宽度和高度，则必须更新边距。

相关文章：