Выровняйте текстовое поле в центре с иконкой рядом с текстовым полем также

Question

<div class="card">
  <div class="col-md-12">
    <span style="margin-left:20px;">
                                 <input rows="4"  cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
    </span>

    <i class="fa fa-long-arrow-left" style="font-size:36px;vertical-align:-19%;color:green"></i>
    <span>
                            <input type="text" name="boxx" id="boxx" style="width:200px;">
                             </span>
    <i class="fa fa-long-arrow-right" style="font-size:48px;color:green"></i>
    <span style="margin-right:20px;">
                                 <input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
                             </span>
  </div>
</div>

Я хочу выровнять среднее текстовое поле по центру div, и значок должен быть близко к текстовому полю.

Answer 1

Вы можете использовать display: flex для центрирования всего:

.col-md-12 {
  display: flex;
  align-items: center;
}

#input-left {
  width:50px;
}

#input-center {
  width:200px;
}

#input-right {
  width:50px;
}

.middle-box {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
}

.fa-long-arrow-left {
  font-size:36px !important;
  /*vertical-align:-19%;*/
  color:green;
}

.fa-long-arrow-right {
  font-size:48px !important;
  color:green; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="col-md-12">
    <span style="margin-left:20px;">
      <input rows="4" cols="50" type="text" name="box" id="input-left">     </span>

    <span class="middle-box">
      <i class="fa fa-long-arrow-left"></i>
      <span>
         <input type="text" name="boxx" id="input-center">
      </span>
      <i class="fa fa-long-arrow-right"></i>      
    </span>
    
    <span style="margin-right:20px;">
      <input rows="4" cols="50" type="text" name="box" id="input-right">
    </span>
  </div>
</div>

Answer 2

Вы установили размер шрифта второго на 48 и вызвали эту ошибку. И я изменил классы начальной загрузки на ряд с 3 столбиками 3-6-3. убедитесь, что на ваши ссылки при загрузке ссылались правильно:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

             <div class ="row">
                    <div class="col-sm-3">
                          <span>
                                 <input rows="4"  cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
                         </span>
                           <i class="fa fa-long-arrow-left" style="font-size:36px;color:green"></i>
                     </div>
                    <div class="col-sm-6">

                        <span>
                            <input type="text" name="boxx" id="boxx" style="width:200px;">
                             </span>
                        <i class="fa fa-long-arrow-right" style="color:green"></i>
                         </div>
                    <div class="col-sm-3">
                        <span>
                                 <input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
                             </span>
                         </div>
               </div>