使用边距0自动对齐HTML元素_Html_Css

使用边距0自动对齐HTML元素

html css

使用边距0自动对齐HTML元素,html,css,Html,Css,我正在尝试将中间的按钮（称为“中心”）与页面中心对齐。我尝试使用margin 0 auto，但没有成功。有人知道我做错了什么吗谢谢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id=container> <div i

我正在尝试将中间的按钮（称为“中心”）与页面中心对齐。我尝试使用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>

为

#容器添加文本对齐：居中


将显示：内联块
添加到#居中
，以便它可以与父文本对齐
属性居中
为left
按钮添加float:left
，为right
按钮添加float:right



#容器{
背景颜色：黄色；
文本对齐：居中；
}
#居中{
显示：内联块；
}
#居中{
背景色：红色；
宽度：65px；
}
#对{
浮动：对；
}
#左{
浮动：左；
}


为#容器添加文本对齐：居中

将显示：内联块
添加到#居中
，以便它可以与父文本对齐
属性居中
为left
按钮添加float:left
，为right
按钮添加float:right


#容器{
背景颜色：黄色；
文本对齐：居中；
}
#居中{
显示：内联块；
}
#居中{
背景色：红色；
宽度：65px；
}
#对{
浮动：对；
}
#左{
浮动：左；
}

要将其居中，如果没有父容器，如您在评论中所述，请给出#center
显示：block
然后边距：0 auto
可以正常工作。
若要将其居中，如您在评论中所说，如果没有父容器，请给出#center
显示：block
然后边距：0 auto可以正常工作。谢谢，但是如果没有父容器怎么办？如何使用边距0自动将中间按钮居中？谢谢，但是如果没有父容器该怎么办？如何使用边距0自动将中间按钮居中？
#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;
}