Выравнивание элементов span как td в таблице

Question

Как сделать элементы span упорядоченными, как в столбце таблицы? то, как сделать step, glyphicons и X быть выровнены так же, как в таблице (например: glyphicons перемещаются вверх, если мы используем интервал)

Html

<div class="row moving"> 
<div class="col-md-12"> 
    <span class="col-md-1"><h4>Step</h4></span> 
    <span class="col-md-8"><textarea class="form-control"></textarea></span> 
    <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span> 
    <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span> 
     <span class="col-md-1"><span>X</span></span> 
</div> 
    </div> 

</br> 
<table> 
    <tr> 
     <td class="col-md-1"><h4>Step</h4></td> 
     <td class="col-md-8"><textarea class="form-control"></textarea></td> 
     <td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></td> 
     <td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></td> 
     <td class="col-md-1"><span>X</span></td> 
    </tr> 
</table> 

CSS

.moving{ 
    margin-top:10px; 
} 
textarea{ 
    resize:none; 
} 

fiddle

Answer 1

Вы можете использовать гибкую коробку CSS3 для выравнивания. align-items: center выровнят элементы внутри контейнера с гибкими контейнерами в центре поперечной оси (вертикальной плоскости).

JSfiddle demo

.moving { 
 
    margin-top: 10px; 
 
} 
 
textarea { 
 
    resize: none; 
 
} 
 
.moving .centered-vertically { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row moving"> 
 
    <div class="col-md-12 centered-vertically"> <span class="col-md-1"><h4>Step</h4></span> 
 
    <span class="col-md-8"><textarea class="form-control"></textarea></span> 
 
    <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span> <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span> <span class="col-md-1"><span>X</span></span> 
 
    </div> 
 
</div> 
 
</br> 
 
<table> 
 
    <tr> 
 
    <td class="col-md-1"> 
 
     <h4>Step</h4> 
 

 
    </td> 
 
    <td class="col-md-8"> 
 
     <textarea class="form-control"></textarea> 
 
    </td> 
 
    <td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span> 
 

 
    </td> 
 
    <td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span> 
 

 
    </td> 
 
    <td class="col-md-1"><span>X</span> 
 

 
    </td> 
 
    </tr> 
 
</table>