css flex box align text center with buttons below it - html

Question

I'm trying to align this box and the two buttons below it directly in the center of the page [horizontally and vertically]. Whenever, I get the textbox to align center, the buttons always seem stuck on the side. I think it's the way I'm trying use CSS for the body and then move the text and buttons as well. The buttons need to be side by side under the textbox [with everything aligned directly in the center of the page].
Here is what I have so far:
.calc {
display: inline-block;
/* align-items: center; */
padding-top: 200px;
padding-left: 20px;
/* display: flex; */
}
.search_btn {
align-items: center;
width: 200px;
margin: 0 auto;
/* display: flex; */
display: inline-block;
}
.search_txt {
width: 300px;
margin: 0 auto;
display: block;
/* display: flex; */
/* flex-direction: column; */
border-radius: 25px;
}
<form class="calc" action="https://calculator.com">
<input class="search_txt" type="text" name="q">
<input class="search_btn" type="submit" value="value">
<input class="search_btn" type="submit" value="area">
<!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 1

#Katie Melosto. I think that the most important thing to deal with flex box is to know where to apply flex to align items, i.e parent element or child element itself.
You can check this url for detailed information of flex css.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have changed some part of your code.
Check this url for my chage.
"https://codepen.io/devbluesky111/pen/oNZxBYW"
body {
display: flex;
justify-content: center;
}
.calc {
display: inline-block;
/* align-items: center; */
padding-top: 200px;
padding-left: 20px;
display: flex-column;
}
.search_btn {
align-items: center;
width: 150px;
margin: 0 auto;
/* display: flex; */
display: block;
}
.search_txt {
width: 300px;
margin: 0 auto;
display: block;
border-radius: 25px;
margin-bottom: 10px;
}
.buttons {
display: flex;
/* flex-direction: column; */
}
<form class="calc" action="https://calculator.com">
<input class="search_txt" type="text" name="q">
<div class="buttons">
<input class="search_btn" type="submit" value="value">
<input class="search_btn" type="submit" value="area">
</div>
</form>

Answer 2

I think you need to wrap both your buttons in a container div and let that container have display:flex. Also your main form need to be display:flex as well but its direction would be flex-direction:column. Then to center things , you can just use align-items:center; justify-content:center
.form-buttons {
display: flex;
gap: 10px;
}
.calc {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
height: 100vh;
}
.search_btn {
width: 200px;
}
.search_txt {
width: 300px;
border-radius: 25px;
}
<form class="calc" action="https://calculator.com">
<input class="search_txt" type="text" name="q">
<div class="form-buttons">
<input class="search_btn" type="submit" value="value">
<input class="search_btn" type="submit" value="area">
</div>
<!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 3

Flex align items based on how many there are within the assigned element. So to do what you want you should wrap you buttons in a div and then set the container to flex with column. That will place the input and buttons in a column. Now set the container for the button to flex row.
.calc {
display: inline-block;
/* align-items: center; */
padding-top: 200px;
padding-left: 20px;
display: flex;
flex-direction: column;
}
#btnContainer {
display: flex;
}
.search_btn {
align-items: center;
width: 200px;
margin: 0 auto;
}
.search_txt {
width: 300px;
margin: 0 auto;
border-radius: 25px;
}
<form class="calc" action="https://calculator.com">
<input class="search_txt" type="text" name="q">
<div id="btnContainer">
<input class="search_btn" type="submit" value="value">
<input class="search_btn" type="submit" value="area">
</div>
<!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 4

You can use display:gird; and place-items:center;
To align content in center
body {
display:grid;
place-items:center;
}
.calc {
display: inline-block;
/* align-items: center; */
padding-top: 200px;
padding-left: 20px;
/* display: flex; */
}
.search_btn {
align-items: center;
width: 200px;
margin: 0 auto;
/* display: flex; */
display: inline-block;
}
.search_txt {
width: 300px;
margin: 0 auto;
display: block;
/* display: flex; */
/* flex-direction: column; */
border-radius: 25px;
}
<form class="calc" action="https://calculator.com">
<input class="search_txt" type="text" name="q">
<input class="search_btn" type="submit" value="value">
<input class="search_btn" type="submit" value="area">
<!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>