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 >
  <form method="post" action="/cart/add">
    <quantity-input  style="width: 120px; min-height: 25.4px; display: inline-flex;">
      <button  name="minus" type="button"> - </button>
      <input  type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
      <button  name="plus" type="button"> </button>
    </quantity-input>
    <br>
    <input type="submit" value="Add to cart"  />
  </form>
</div>

Thanks for your input.

CodePudding user response：

Add text-align: center to the form. https://jsfiddle.net/211368e/8vkLzg6c/9/

CodePudding user response：

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 >
  <form method="post" action="/cart/add" >

 <div>
    <quantity-input  style="width: 120px; min-height: 25.4px; display: inline-flex;">

      <button  name="minus" type="button"> - </button>

      <input  type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">

      <button  name="plus" type="button"> </button>

    </quantity-input>
     </div>

    <br>


    <input type="submit" value="Add to cart"  />

  </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.

CodePudding user response：

    **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>

CodePudding user response：

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 >
    <button> - </button>
    <input type="number" name="quantity" id="quantity" min="1" value="1">
    <button>   </button>
  </div>
  <br>
  <input type="submit"  />
</form>

CodePudding user response：

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 >
  <form method="post" action="/cart/add">
    <quantity-input  style="width: 120px; min-height: 25.4px; display: inline-flex;">
      <button  name="minus" type="button"> - </button>
      <input  type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
      <button  name="plus" type="button"> </button>
    </quantity-input>
    <br>
    <input type="submit" value="Add to cart"  />
  </form>
</div>

CodePudding user response：

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