Mitte vertikal in Partizip div nicht Container

Ich habe versucht, mein Problem zu vereinfachen, habe ich online gesucht; aber ich habe es versäumt, diese Zahlen vertikal zu zentrieren; bitte helfen. Ich habe CSS und HTML eingefügt.Mitte vertikal in Partizip div nicht Container

Dieser Text wird nicht benötigt, die Website braucht nur mich, um mehr Text für mich zu übermitteln.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
     .colors2, .colors3 { 
     background-color: lightgrey; 
     height: 80px; 
     text-align: center; 
     font-weight: bold; 
     font-size: 26px; 
     } 

     .colors2:hover, .colors3:hover { 
      background-color: grey; 
     } 

     .colors3 { 
      font-weight: normal; 
     } 
    </style> 

</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row colors1"> 
      <div class="col-sm-2 colors3"> 
       <span>6</span> 
      </div> 
      <div class="col-sm-2 colors2"> 
       <span>7</span> 
      </div> 
      <div class="col-sm-2 colors2"> 
       <span>8</span> 
      </div> 
      <div class="col-sm-2 colors2"> 
       <span>9</span> 
      </div> 
      <div class="col-sm-2 colors3"> 
       <span>5</span> 
      </div> 
      <div class="col-sm-2"> 
       <span></span> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Quelle

2017-02-26 Developer

Verwenden Sie die css3 flex-Eigenschaft. das funktioniert ganz gut.

.colors2, .colors3 { 
 
     background-color: lightgrey; 
 
     height: 80px; 
 
     text-align: center; 
 
     font-weight: bold; 
 
     font-size: 26px; 
 
     } 
 

 
     .colors2:hover, .colors3:hover { 
 
      background-color: grey; 
 
     } 
 

 
     .colors3 { 
 
      font-weight: normal; 
 
     } 
 
     
 
     .col-sm-2 { 
 
      align-items: center; 
 
      justify-content: center; 
 
      display: flex; 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
     <div class="row colors1"> 
 
      <div class="col-sm-2 colors3"> 
 
       <span>6</span> 
 
      </div> 
 
      <div class="col-sm-2 colors2"> 
 
       <span>7</span> 
 
      </div> 
 
      <div class="col-sm-2 colors2"> 
 
       <span>8</span> 
 
      </div> 
 
      <div class="col-sm-2 colors2"> 
 
       <span>9</span> 
 
      </div> 
 
      <div class="col-sm-2 colors3"> 
 
       <span>5</span> 
 
      </div> 
 
      <div class="col-sm-2"> 
 
       <span></span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-02-26 16:39:51 Avik

Mitte vertikal in Partizip div nicht Container

Antwort

Verwandte Themen