Align CSS Inhalt

Question

Ich habe folgendes Panel:

Und was ich will ist die Kreisdiagramme in der td meiner Tabelle zu zentralisieren und es zentralisierte zu halten, wenn es um mobile dreht. Ich habe Probleme, das zu versuchen. Dies ist, wie mein Code:

<div class="portlet-body row"> 
    <div class="col-lg-12"> 
     <h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta"> 
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p100 orange big"> 
          <span>100%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td>      
       </tr> 
       <tr> 
        <td>PISO</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta"> 
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p82 big"> 
          <span>82%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td>META</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta">       
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p63 green big"> 
          <span>63%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td>SUPERMETA</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Es gibt einige Klassen sind, aber ich bin mit ihnen nicht jetzt.

Link zu codepen: http://codepen.io/anon/pen/apNrxy

Jeder Vorschlag? Vielen Dank!

Answer 1

Es ist einfach zu tun, wenn Sie flexbox nutzen können (Siehe Browserkompatibilität here).

Wenn Sie mit Bootstrap-Version 4 können Sie nur den Inhalt wickeln mit:

<div class="d-flex justify-content-around">...</div> 

Siehe documentation für weitere Informationen.

Wenn Sie Bootstrap-Version 3 verwenden, können Sie immer noch die Stile Flexbox direkt verwenden:

display: flex; 
justify-content: space-around; 

Answer 2

Aktualisieren Sie Ihre CSS auf diese

.c100 { 
    position: relative; 
    font-size: 120px; 
    width: 1em; 
    height: 1em; 
    border-radius: 50%; 
    /* float: left; */ 
    margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */ 
    background-color: #cccccc; 
}