How can I centre the input between the buttons (bootstrap5)-CodePudding

I want to centre the input between the two buttons but I tried about everything I know and nothing works:( Here's a picture of what it looks like right now, I want it to be smaller and inbetween (1 line).

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div >
  <div >
    <div >
      <a href="#" >-</a>
      <input type="text"  placeholder="0">
      <a href="#" > </a>
    </div>

CodePudding user response：

Perhaps you can use d-flex class in your div container to enable flex layout

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div >
  <div >
    <div >
      <a href="#" >-</a>
      <input type="text"  placeholder="0" />
      <a href="#" > </a>
    </div>
  </div>
</div>

CodePudding user response：

in your css file:

.div.mx-auto{
    font-size:0;
}
.div.mx-auto a,
.div.mx-auto input{
    display:inline block;
    vertical-align:middle;
    font-size: 1rem;
}