居中<a> in <div></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

从position: absolute;移除.button1，然后添加margin: 0 auto;。

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以删除“position：absolute”并改为使用“margin：0 auto”。 让我知道它是如何运作的。