CSS - One big Text field between two big buttons

Question

I have 2 big buttons and a text field between them. At the moment, it looks like this:

But I am trying to get it to look like this:

Here is my code:

.input-group-btn {
  width: 90%;
  height: 90%;
}

#quantity {
  font-size: 40px;
  width: 5%;
  height: 90%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css">



<div class="col-md-12 offset-md-4">
  <div>
    <span> <button type="button" class="quantity-left-minus btn btn-danger btn-number" style="font-size: 50px;" data-type="minus" data-field="">  <span class="fa fa-minus-circle"></span> </button>
    </span>
    <span><input type="text" id="quantity" name="quantity" class="input-number" value="1" min="1" max="100"></span>
    <span><button type="button" class="quantity-right-plus btn btn-success btn-number" style="font-size: 50px;" data-type="plus" data-field="">  <span class="fa fa-plus-circle"></span> </button>
    </span>

  </div>
  <br>
  <br>
  <span><a href="" class="btn btn-primary btn-lg active" role="button" aria-pressed="true" style=" font-size: 50px;" id="printLabel" onclick="dowloadFileJS()">STAMPA</a></span>
</div>

Answer 1

Sizes in percentag refer to the parent's size.

The parents of .input-group-btn and #quantity are <span> elements.

<span> is an inline element. That means it cannot have a fixed size (height, width, margin cannot be defined). They match to their children's size.

Since your <input> and <button> do not have a fixed size defined, they are sized to default. So the parent inline element (<span>) also sizes to that default.

Then your height: 90% is computed. Relating to the parent that has no fixed size.

That means your <input> and <button> are just scaled down to 90% from their default height.

Hint: It is always tricky to use percentage values for sizing and is therefore not recommended for every case.

See also:
CSS – why doesn’t percentage height work?
Percentage Height HTML 5/CSS

Answer 2

I added .buttons-wrapper { display: flex; align-items: center; } to make it aligned vertically, and some padding to the text input,

Check this code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="col-md-12 offset-md-4">
  <div class="buttons-wrapper">
    <span>
      <button type="button" class="quantity-left-minus btn btn-danger btn-number" style="font-size: 50px;"
        data-type="minus" data-field="">
        <span class="fa fa-minus-circle"></span> </button> </span>
    <span>
    <input type="text" id="quantity" name="quantity" class="input-number" value="1" min="1" max="100">
    </span>
    <span>
    <button type="button" class="quantity-right-plus btn btn-success btn-number" style="font-size: 50px;"
        data-type="plus" data-field=""> <span class="fa fa-plus-circle"></span> </button></span>

  </div>
  <br>
  <br>
  <span><a href="" class="btn btn-primary btn-lg active" role="button" aria-pressed="true" style=" font-size: 50px;"
      id="printLabel" onclick="dowloadFileJS()">STAMPA</a></span>
</div>
<style>
  .input-group-btn {
    width: 90%;
    height: 90%;
  }

  .buttons-wrapper {
    display: flex;
    align-items: center;
  }

  #quantity {
    font-size: 40px;
    width: 65px;
    padding: 12.5px 0;
    margin: 0 10px;
  }
</style>

Why did you wrap your elements in <span> ? Personally I would get rid of all the unnecessary <span>, and if I need to wrap any element I would use <div>.

Answer 3

I've added some padding to the text input box to increase the height and added some offset from the top to align. This is of course if you must keep the span elements. https://jsfiddle.net/31v0aupc/1/.

 #quantity{
           font-size: 40px;
           width:5%;
           height:85%;
           padding: 18px 0;
           position: relative;
           top:10px;
        }

Answer 4

If you can, try using inline-flex.

div {
  display: inline-flex;
  align-items: center;
}