文本和进度条的垂直对齐方式

Question

这可能很简单，但我无法对齐文本和进度条。看起来文本基于基线，进度条从顶部呈现。如何将三个元素垂直对齐？

在html中，

<div class="row">
   <div class="col-xs-4"> sample-1 </div>
   <div> class="col-xs-4 progress>
       <div class="progress-bar" data-progress="80"></div>
   </div>
   <div class="col-xs-4"> x </div>

在css中，

.col-xs-4 { width: 33.33333%; float: left; line-height: 24px;}
.progress { height: auto;}
.progress-bar { float: left; height: 18px;}

结果是所有元素都在基线上。

我想将文本与关闭标记对齐，并与进度条垂直对齐。

Answer 1

我认为你要的是，css - position:relative; text-align:center;没有float而没有width。另外，我不知道你的代码中是否有这种情况，但<div> class="col-xs-4 progress>看起来有点时髦。