Question

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

这是我的HTML

<!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

Answer 1

要将容器中的文本居中，请使用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;
}

Answer 2

将标题按钮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;
}

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

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

2 个答案: