Metin ve ilerleme çubuğu dikey hizalaması

Question

Bu basit olabilir, ancak bir metni ve ilerleme çubuğunu hizalayamıyorum. Metnin taban çizgisine dayalı olduğu ve ilerleme çubuğunun üstten oluştuğu anlaşılıyor. Üç elemanı dikey olarak nasıl hizalayabilirim? html olarak

, CSS

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

,

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

sonuç tüm elemanlar taban üzerine oturmak.

Metni ve kapatma işaretini ilerleme çubuğuyla dikey olarak hizalamak istiyorum.

Answer 1

Ben sizin için ne olduğunu düşünüyorum, css - position:relative; text-align:center; no float ve width. Ayrıca, kodunuzda böyle bir şey olup olmadığını bilmiyorum, ancak bu <div> class="col-xs-4 progress> biraz korkak görünüyor.