Question

我试图将8个div放在另一个div中。

这是我的HTML代码：

<div align="center" id="buttonBar">
    <div class="menuButton">
        <a href="link" class="menuButtonText">Home</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Author</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Literature</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Projects</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Pictures</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">How To...</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Updater</a>
    </div>
    <div class="menuButton">
        <a href="link" class="menuButtonText">Copyright</a>
    </div>
</div>

这是我的CSS：

#buttonBar {
    padding-left: 50px;
    position: fixed;
    width: 100%;
}
.menuButton {
    height: 50px;
    width: 125px;
    background-color: lightblue;
    display:inline-block;
    text-align: center;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
}
.menuButtonText {
    font-size: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
    text-decoration: none;
}

#buttonBar {
  padding-left: 50px;
  position: fixed;
  width: 100%;
}
.menuButton {
  height: 50px;
  width: 125px;
  background-color: lightblue;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  margin-left: auto;
  margin-right: auto;
}
.menuButtonText {
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  color: black;
  text-decoration: none;
}

<div align="center" id="buttonBar">
  <div class="menuButton">
    <a href="link" class="menuButtonText">Home</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Author</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Literature</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Projects</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Pictures</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">How To...</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Updater</a>

  </div>
  <div class="menuButton">
    <a href="link" class="menuButtonText">Copyright</a>

  </div>
</div>

添加align:center并将margin-left和margin-right设置为自动，确实会移动我的div，但不会移动到中心。它将div更向右移动。有什么我做错了吗？

Answer 1

尝试从padding-left: 50px中取出#buttonBar。

#buttonBar {
    padding-left: 50px;
    position: fixed;
    width: 100%;
}

应该是

#buttonBar {
    position: fixed;
    width: 100%;
}

我认为这就是将其推向正确的方向。

Answer 2

对于所有div 宽度：100％; margin-left：auto; margin-right：auto;

http://www.thesitewizard.com/css/center-div-block.shtml

中心区在另一个区内

2 个答案: