Input button not centered - css

Question

I have the following fiddle: https://jsfiddle.net/uosLke60/
I would like the input button to center underneath the quantity selector. How can I achieve this?
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
Thanks for your input.

Answer 1

You'll have to change a few things.
Note: A few of my changes are not a good practice like using !important, but I had to use it because it wasn't changing, so I had to force an overwrite there.
.Product_Card_Button {
width: fit-content;
}
quantity-input {
display: block !important;
width: 100% !important;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
padding: 5px 0px;
}
.quantity-form {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.quantity-form > quantity-input {
height: 100%;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add" class="quantity-form">
<div>
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
</div>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>
On this approach, I decided to use flexbox, because it was the easiest way to align items, I had to change the width as well or it wouldn't truly align to the center.

Answer 2

**Remove "display: inline-flex;"**
<style>
form{text-align: center;}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
****Another solution****
quantity-input.quantity {
width: max-content !important;
}
</style>

Answer 3

You can use width:fit-content and text-align: center on form.
Note that the button is centered in the form, but not with the input value because of the type="number" adding buttons on the right (Center text in html number input).
form{
width:fit-content;
text-align: center;
border:1px solid black;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
opacity: 1;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
cursor: pointer;
font-size: 13px;
width: 120px;
}
input{
text-align: center;
}
<form method="post" action="/cart/add">
<div class="quantity">
<button> - </button>
<input type="number" name="quantity" id="quantity" min="1" value="1">
<button> + </button>
</div>
<br>
<input type="submit" class="Add_To_Cart_Button" />
</form>

Answer 4

Here you go, without changing your CSS just add some, like a grid system / flexbox:
DEMO
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
/* ADDED */
quantity-input{
flex-wrap: wrap;
}
button{
flex: 1 0 50%;
max-width: 100%;
order: 2;
margin: auto;
}
#quantity{
flex: 0 0 100%;
order: 1;
max-width: calc(100% - 8px);
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>

Answer 5

You only need to change your display: inline-block, change the width to 100% and add a text-align: center;, and it should be working

Answer 6

Add text-align: center to the form. https://jsfiddle.net/211368e/8vkLzg6c/9/
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
form{
text-align: center;
}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="min-width: 50vw; min-height: 25.4px; display: inline-flex">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>

Answer 7

Replace margin-bottom: 40px; with margin: 0 0 40px 40px;
This way you are adding 40px of margin on left and bottom side of the button