在 <div> 中居中 <a>

Question

我正在尝试让我的 <a> 标签居中 div#teacherpageoptions。它们位于 Microsoft Expression Web 的中心，但当我在浏览器中查看页面时却不是。我做错了什么？

#blackbar {
  background-color: chartreuse;
  padding: 10px;
  height: 57px;
}
html {
  height: 100%;
}
body,
#teacherpage {
  min-height: 100%;
  background-color: #f4f4f4;
}
hr {
  visibility: hidden;
}
.center {
  padding-bottom: 50px;
  padding-top: 50px;
}
.button {
  display: block;
  width: 115px;
  height: 25px;
  background: chartreuse;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}
.button1 {
  display: block;
  width: 115px;
  height: 25px;
  background: #008dde;
  padding: 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  position: absolute;
}
p {
  color: white;
  font-weight: bold;
  line-height: 40px;
}
.auto-style1 {
  /* Make username hang a little to the left. */
  margin-left: 53px;
}
#teacherpage {
  height: 327px;
  background-color: gray;
}
#teacherpageoptions {
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
.auto-style2 {
  margin-right: 0px;
}
.wrapper {
  text-align: center;
}
.auto-style3 {
  margin-bottom: 0px;
}
a {
  height: 100%;
  opacity: 0.5;
  width: 100%;
}
a:hover {
  opacity: 1;
  -webkit-transform: scale(3);
  -ms-transform: scale(3);
  transform: scale(3);
}

<div id="blackbar" class="auto-style3">
  <a href="Login2.php" class="button" style="float:left; text-decoration: none;"> Logout  </a> 
  <p style=" float:right; height: 36px;" class="auto-style1">Username
    <?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
  </p>
</div>
<hr>

<div id="teacherpageoptions">

  <div class="wrapper" style="height:100px "><a href="MakeQuestions.php" class="button1" style="text-decoration: none"> Make Questions </a> 
    <div class="center"></div>
    <a href="MakeExam.php" class="button1" style="text-decoration: none"> Make Exam </a>
  </div>
</div>

Answer 1

从 .button1 中删除 position: absolute; 并添加 margin: 0 auto;。

#blackbar {
  background-color: chartreuse;
  padding: 10px;
  height: 57px;
}
html {
  height: 100%;
}
body,
#teacherpage {
  min-height: 100%;
  background-color: #f4f4f4;
}
hr {
  visibility: hidden;
}
.center {
  padding-bottom: 50px;
  padding-top: 50px;
}
.button {
  display: block;
  width: 115px;
  height: 25px;
  background: chartreuse;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}
.button1 {
  display: block;
  width: 115px;
  height: 25px;
  background: #008dde;
  padding: 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  /* position: absolute; */
  margin: 0 auto;
}
p {
  color: white;
  font-weight: bold;
  line-height: 40px;
}
.auto-style1 {
  /* Make username hang a little to the left. */
  margin-left: 53px;
}
#teacherpage {
  height: 327px;
  background-color: gray;
}
#teacherpageoptions {
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
.auto-style2 {
  margin-right: 0px;
}
.wrapper {
  text-align: center;
}
.auto-style3 {
  margin-bottom: 0px;
}
a {
  height: 100%;
  opacity: 0.5;
  width: 100%;
}
a:hover {
  opacity: 1;
  -webkit-transform: scale(3);
  -ms-transform: scale(3);
  transform: scale(3);
}

<div id="blackbar" class="auto-style3">
  <a href="Login2.php" class="button" style="float:left; text-decoration: none;"> Logout  </a> 
  <p style=" float:right; height: 36px;" class="auto-style1">Username
    <?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
  </p>
</div>
<hr>

<div id="teacherpageoptions">

  <div class="wrapper" style="height:100px "><a href="MakeQuestions.php" class="button1" style="text-decoration: none"> Make Questions </a> 
    <div class="center"></div>
    <a href="MakeExam.php" class="button1" style="text-decoration: none"> Make Exam </a>
  </div>
</div>

Answer 2

您可以删除 "position:absolute" 并改用 "margin:0 auto"。让我知道它是如何工作的。

在 <div> 中居中 <a>

Centering <a> in <div>

html

css

centering