Issue
I would like to put 2 buttons on top of each other while still keeping both of them centered. I managed to put them on top of each other through the display: block, and through the flex-direction: column. However, I still don't know how to center them. The text-align doesn't seem to work. could somebody explain to me why this doesn't work, please?
button{
border: none;
padding-top: 10px;
padding-bottom: 10px ;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
.btn-group{
display: flex;
flex-direction: column;
text-align: center;
}
#increment-btn{
background: darkred;
}
#save-btn{
background-color: green;
}
This is the HTML:
<div class="btn-group">
<button id="save-btn" onclick="save()">SAVE</button>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
</div>
Solution
You may use align-items: center;
, it is a flex-direction: column;
, so it will be align on the horizontal axis :)
button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
.btn-group {
display: flex;
flex-direction: column;
align-items: center;
}
#increment-btn {
background: darkred;
}
#save-btn {
background-color: green;
}
<div class="btn-group">
<button id="save-btn" onclick="save()">SAVE</button>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
</div>
Aside, flex or grid children do not really need to be reset to block if it is an inline element , they become part(cells) of the generated grid . (float is also ignored)
Answered By - G-Cyrillus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.