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.
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>
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>
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>
您可以将两个按钮都放在div中,并在外部div中将该div居中。
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.