如何將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 。