Input button not centered

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.

Jaswinder Kaur · Answer 1 · 2022-05-23T10:01:17.247

0

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

edited May 23 '22 at 10:01

answered May 23 '22 at 09:41

Jaswinder Kaur

1,606
4
15

I need to keep the inline-flex there because of other formatting reasons in the website. any other suggestions while keeping the inline-flex? – fiddle May 23 '22 at 09:46
quantity-input.quantity { width: max-content !important; } – Jaswinder Kaur May 23 '22 at 09:50

score 0 · Answer 2 · edited May 23 '22 at 09:56

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.

score 0 · Answer 3 · edited May 23 '22 at 15:39

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>

MaxiGui · Answer 4 · 2022-05-23T12:19:02.223

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>

Cédric · Answer 5 · 2022-05-23T12:13:56.553

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>

score 0 · Answer 6 · 2022-05-23T14:19:37.963

0

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

edited May 23 '22 at 14:19

answered May 23 '22 at 14:11

score -1 · Answer 7 · answered May 23 '22 at 09:46

-1

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

answered May 23 '22 at 09:46

Neeraj Chimwal

57
1
8

Input button not centered

7 Answers7

DEMO