Question

我正在尝试将名为“center”的中间按钮对齐到页面的中心。我尝试使用margin 0 auto但没有成功。有谁知道我做错了什么？

感谢。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id=container>
    <div id="left">
      <input type="button" value="left">
    </div>

    <div id="center">
      <input type="button" value="center">
    </div>

    <div id="right">
      <input type="button" value="right">
    </div>
  </div>
</body>
</html>

这是css

#container {
  background-color: yellow;
}

#left, #center, #right {
  display: inline-block;
}

#center {
  background-color: red;
  width: 65px;
  text-align: center;
  margin: 0 auto;
}

#right {
  float: right;
}

Answer 1

为text-align:center

#container

将display:inline-block添加到#center，以便它可以使用父text-align属性
为float:left按钮添加left，为float:right按钮添加right

＆＃13;

#container {
  background-color: yellow;
  text-align: center;
}
#center {
  display: inline-block;
}
#center {
  background-color: red;
  width: 65px;
}
#right {
  float: right;
}
#left {
  float: left;
}

＆＃13;

<div id=container>
  <div id="left">
    <input type="button" value="left">
  </div>
  <div id="center">
    <input type="button" value="center">
  </div>
  <div id="right">
    <input type="button" value="right">
  </div>
</div>

＆＃13;

Answer 2

要居中，如果没有父容器，正如您在评论中所述，请#center display:block然后margin: 0 auto;将正常工作。

使用margin 0 auto对齐HTML元素

2 个答案: