Description centrée pour une barre de progression en ligne

Question

Je cherche un moyen d'avoir une description de barre de progression centrée. J'ai une barre de progression dans l'en-tête d'un panneau pour informer les utilisateurs sur le contenu du panneau. Le problème est: la description est toujours sur le côté gauche de la barre de progression si je le mets dans le conteneur .progress-bar ou sur le côté droit si je le mets dans le conteneur .progress. Veuillez regarder l'exemple ci-dessous pour voir ce que je veux dire.

Ce que je veux est une description toujours centrée -> il doit y avoir un moyen facile d'accomplir cela. :-)

.inline .in { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
} 
 

 
.panel .inline .progress { 
 
    top: 7px; 
 
    position: relative; 
 
    margin-left: 10%; 
 
    background-color: red; 
 
} 
 

 
.panel .progress { 
 
    width: 40%; 
 
    border-radius: 0; 
 
} 
 

 
.panel-heading-btn { 
 
    float: right; 
 
} 
 

 
.panel-title { 
 
    line-height: 20px; 
 
    font-size: 12px; 
 
} 
 

 
.panel-heading { 
 
    padding: 10px 15px; 
 
    border: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/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"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h2>Panel Heading</h2> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <div class="panel-heading-btn"> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a> 
 
     </div> 
 
     <div class="inline"> 
 
     <h4>Panel Heading</h4> 
 

 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
     50/100 available       </div> 
 
     </div> 
 
     
 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 
 
     10/100 available       </div> 
 
     </div> 
 
     
 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 
 
     90/100 available       </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-body">Panel Content</div> 
 
    </div> 
 
</div>

Answer 1

Qu'est-ce que vous avez besoin est quelque chose d'indépendant de toute construction de barre de progression. Les flotteurs, les largeurs. Une façon de procéder est de placer la description dans un élément qui lui est propre et de la positionner absolument.

.inline .in { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
} 
 

 
.panel .inline .progress { 
 
    top: 7px; 
 
    position: relative; 
 
    margin-left: 10%; 
 
    background-color: red; 
 
} 
 

 
.panel .progress { 
 
    width: 40%; 
 
    border-radius: 0; 
 
} 
 

 
.panel-heading-btn { 
 
    float: right; 
 
} 
 

 
.panel-title { 
 
    line-height: 20px; 
 
    font-size: 12px; 
 
} 
 

 
.panel-heading { 
 
    padding: 10px 15px; 
 
    border: none; 
 
} 
 

 
.progress-description { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    text-align: center 
 
}

<link href="https://maxcdn.bootstrapcdn.com/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" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h2>Panel Heading</h2> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <div class="panel-heading-btn"> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a> 
 
     <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a> 
 
     </div> 
 
     <div class="inline"> 
 
     <h4>Panel Heading</h4> 
 

 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
      <span class="progress-description">50/100 available</span> </div> 
 
     </div> 
 

 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 
 
      <span class="progress-description">10/100 available</span> </div> 
 
     </div> 
 

 
     <div class="progress in"> 
 
      <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 
 
      <span class="progress-description">90/100 available</span> </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-body">Panel Content</div> 
 
    </div> 
 
</div>