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

Question

I've a div (1140 x 180) and I need to set two buttons inside, next to each other. Ideally, one button occupies the entire left side, and the other all the right side. All this with "Flex", because I must respect the responsive design.

Answer 1

You can do this very simply by using the flex property like so:

.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

Here is code snippet to understand that buttons are horizontally and vertically center.

Here is a document on how to align items with display: flex

Snippet:

 .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

Based on the Claire answer. Here is a solution:

CSS:

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


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

HTML(same):

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

Answer 4

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

Answer 5

Well, If the div has display:flex; , then you can justify-content:center . It will align all items to the center.

You can study more about justify-content from https://www.w3schools.com/cssref/css3_pr_justify-content.asp

If the div is display:block which is by default div styles. you can use text-align:center on parent div.