html - 在显示表格布局中更改 Bootstrap 字形中断对齐中的字体大小

Question

我想创建一种样式，其中一些正方形与使用 bootstrap glyphicon 制作的箭头对齐。为此，我创建了一些自定义样式，将显示用作表格 css 代码。

当我对 glyphicon 使用普通样式时，一切正常，但是当我尝试更改 glyphicon 的字体大小时，因为我想要它更大，glyphicon 与设计的其余部分不一致并且变得更高。我试过从顶部、文本位置等更改位置，但没有任何效果。有人可以解决这个问题吗？

这是代码:(由于我没有包含正确的资源，所以并没有真正显示字形，但无论如何设计都被改变了)

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

<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属性(property)应该做你需要的:

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