コンビニエンスではないコンビニエンスdiv内のセンター垂直

私は問題を簡素化しようとしました。私はオンラインで検索しました。しかし、私はこの数値を垂直方向に中心合わせする方法に失敗しました。手伝ってください。私はCSSとHTMLを含んでいます。コンビニエンスではないコンビニエンスdiv内のセンター垂直

このテキストは必須ではありません。ウェブサイトでは、送信するテキストを追加する必要があります。

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

出典

2017-02-26 Developer

css3 flexプロパティを使用します。これはかなりうまくいく。

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

出典

2017-02-26 16:39:51 Avik

コンビニエンスではないコンビニエンスdiv内のセンター垂直

答えて

関連する問題