ブートストラップのフォントサイズを変更するグリフコン表示テーブルのレイアウトでブレークアラインメント

Question

いくつかの四角形がブートストラップグリフコンで作られた矢印に揃えられたスタイルを作りたいと思います。これを行うには、いくつかのカスタムスタイルをテーブルのCSSコードとして表示を使用して作成しました。

私はグリフコンの通常のスタイルを使用するとすべてが問題ありませんが、グリフコンのフォントサイズを変更しようとすると、グリフコンのサイズが大きくなりたいので、グリフコンは残りのデザインと並んでいません。私はトップ、テキスト位置などから位置を変更しようとしましたが、何も機能しませんでした。誰かがこの問題を解決できますか？ （私は、適切なリソースが含まれていませんが、デザインはとにかく変更されているのでglyphiconが実際に示されていない）

.recipe { 
 
\t border-style: solid; 
 
\t border-width: 1px; 
 
} 
 
.recipe_small { 
 
\t width: 12px; 
 
\t height: 12px; 
 
} 
 
.recipe_large { 
 
\t width: 32px; 
 
\t height: 32px; 
 
} 
 
.common_recipe { 
 
\t border-color: #5e5e5e; 
 
} 
 
.uncommon_recipe{ 
 
\t border-color: green; 
 
} 
 
.rare_recipe { 
 
\t border-color: blue; 
 
} 
 
.epic_recipe { 
 
\t border-color: purple; 
 
} 
 
.common_bg{ 
 
\t background-color: #5e5e5e; 
 
} 
 
.uncommon_bg { 
 
\t background-color: green; 
 
} 
 
.rare_bg { 
 
\t background-color: blue; 
 
} 
 
.epic_bg { 
 
\t background-color: purple; 
 
} 
 
.tablelike{ 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 2px; 
 
} 
 
.table-row{ 
 
    display: table-row; 
 
} 
 
.table-cell, .table-head{ 
 
    display: table-cell; 
 
} 
 
.table-head{ 
 
    font-weight:bold; 
 
} 
 
.glyphicon-large { 
 
\t font-size: 30px; 
 
}

<link href="https://www.fantamondi.it/cotli/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
Normal size, everything is in line 
 
<div class="tablelike"> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     <div class="tablelike"> 
 
     <div class="table-row"> 
 
      <div class="table-cell"><div class="recipe recipe_small common_recipe common_bg">&nbsp;</div></div> 
 
      <div class="table-cell"><div class="recipe recipe_small uncommon_recipe uncommon_bg">&nbsp;</div></div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"><div class="recipe recipe_small rare_recipe">&nbsp;</div></div> 
 
      <div class="table-cell"><div class="recipe recipe_small epic_recipe epic_bg">&nbsp;</div></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe recipe_large rare_recipe rare_bg">&nbsp;</div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe"><span title="Can be crafted" class="glyphicon glyphicon-arrow-up epic"></span></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
With altered font size, arrow goes up 
 
<div class="tablelike"> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     <div class="tablelike"> 
 
     <div class="table-row"> 
 
      <div class="table-cell"><div class="recipe recipe_small common_recipe common_bg">&nbsp;</div></div> 
 
      <div class="table-cell"><div class="recipe recipe_small uncommon_recipe uncommon_bg">&nbsp;</div></div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"><div class="recipe recipe_small rare_recipe">&nbsp;</div></div> 
 
      <div class="table-cell"><div class="recipe recipe_small epic_recipe epic_bg">&nbsp;</div></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe recipe_large rare_recipe rare_bg">&nbsp;</div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe"><span title="Can be crafted" class="glyphicon glyphicon-arrow-up glyphicon-large epic"></span></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

vertical-alignプロパティ何をすべき：ここでは

はコードがあります次のものが必要です。

.recipe { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.recipe_small { 
 
    width: 12px; 
 
    height: 12px; 
 
} 
 

 
.recipe_large { 
 
    width: 32px; 
 
    height: 32px; 
 
} 
 

 
.common_recipe { 
 
    border-color: #5e5e5e; 
 
} 
 

 
.uncommon_recipe { 
 
    border-color: green; 
 
} 
 

 
.rare_recipe { 
 
    border-color: blue; 
 
} 
 

 
.epic_recipe { 
 
    border-color: purple; 
 
} 
 

 
.common_bg { 
 
    background-color: #5e5e5e; 
 
} 
 

 
.uncommon_bg { 
 
    background-color: green; 
 
} 
 

 
.rare_bg { 
 
    background-color: blue; 
 
} 
 

 
.epic_bg { 
 
    background-color: purple; 
 
} 
 

 
.tablelike { 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 2px; 
 
} 
 

 
.table-row { 
 
    display: table-row; 
 
} 
 

 
.table-cell, 
 
.table-head { 
 
    display: table-cell; 
 
} 
 

 
.table-head { 
 
    font-weight: bold; 
 
} 
 

 
.glyphicon-large { 
 
    font-size: 30px; 
 
    vertical-align: top; 
 
}

<link href="https://www.fantamondi.it/cotli/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> Normal size, everything is in line 
 
<div class="tablelike"> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     <div class="tablelike"> 
 
     <div class="table-row"> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small common_recipe common_bg">&nbsp;</div> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small uncommon_recipe uncommon_bg">&nbsp;</div> 
 
      </div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small rare_recipe">&nbsp;</div> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small epic_recipe epic_bg">&nbsp;</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe recipe_large rare_recipe rare_bg">&nbsp;</div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe"><span title="Can be crafted" class="glyphicon glyphicon-arrow-up epic"></span></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
With altered font size, arrow goes up 
 
<div class="tablelike"> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     <div class="tablelike"> 
 
     <div class="table-row"> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small common_recipe common_bg">&nbsp;</div> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small uncommon_recipe uncommon_bg">&nbsp;</div> 
 
      </div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small rare_recipe">&nbsp;</div> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div class="recipe recipe_small epic_recipe epic_bg">&nbsp;</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe recipe_large rare_recipe rare_bg">&nbsp;</div> 
 
    </div> 
 
    <div class="table-cell"> 
 
     <div class="recipe"><span title="Can be crafted" class="glyphicon glyphicon-arrow-up glyphicon-large epic"></span></div> 
 
    </div> 
 
    </div> 
 
</div>