Question

如何使span元素按表格列的顺序排列？即如何使glyphicons，X和<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>与表格中的对齐方式相同（例如：如果我们使用span，则：glyphicons会向上移动）

HTML

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

CSS

std::wifstream input1(path);
std::wstring content((std::istreambuf_iterator<wchar_t>(input1)),
        (std::istreambuf_iterator<wchar_t>()));

这是fiddle

Answer 1

您可以使用CSS3灵活盒进行对齐。 align-items: center会将柔性盒容器内的元素对齐，使其位于交叉轴（垂直平面）的中心。

JSfiddle demo

＆＃13;

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

＆＃13;

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

＆＃13;

跨度元素的对齐方式为表中的td

1 个答案: