如何将div中的2个按钮水平居中？

Question

我有一个div（1140 x 180），我需要在内部设置两个按钮，彼此相邻。 理想情况下，一个按钮占据整个左侧，另一个按钮占据整个右侧。 所有这些都使用“ Flex”，因为我必须尊重响应式设计。

Answer 1

您可以通过使用flex属性非常简单地执行此操作，如下所示：

.container {
  display:flex;
  width: 1140px;
  height: 180px;
}
.button {
  flex:1;
  height:100%;
}

<div class=“container”>
  <div class=“button”>first button</div>
  <div class=“button”>second button</div>
</div>

Answer 2

这是一些代码片段，以了解按钮在水平和垂直方向上居中。

这是有关如何使display: flex与项目对齐的文档 display: flex

片段：

 .container{ display: flex; align-items: center; justify-content: center; border: 1px solid red; width: 1140px; height: 180px; } .button{ display:inline-block; height: 50px; width: 100px; } 

 <div class="container"> <button class="button">Button1</button> <button class="button">Button2</button> </div> 

Answer 3

基于克莱尔的答案。 这是一个解决方案：

CSS：

.container {
        display:flex;
        width: 1140px;
        height: 180px;
        }


        .button {
            width: 50%;
            display: inline-flex;
            justify-content: center;
        }

HTML（相同）：

<div class=“container”>
        <div class=“button”>first button</div>
        <div class=“button”>second button</div>
</div>

Answer 4

您可以将两个按钮都放在div中，并在外部div中将该div居中。

Answer 5

好吧，如果div有display:flex; ，那么您就可以justify-content:center 。 它将所有项目与中心对齐。

您可以从https://www.w3schools.com/cssref/css3_pr_justify-content.asp了解更多有关证明内容的信息

如果div为display:block ，则默认为div样式。 您可以在父div上使用text-align:center 。