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

下面是代码片段，以了解按钮在水平和垂直的中心。

这里是document，说明如何将项目与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。

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

5 个答案: