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

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

当我为glyphicon使用普通样式时，一切都很好，但是当我尝试更改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>

最佳答案

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>

关于html - 在显示表格布局中更改Bootstrap Glyphicon中断对齐方式的字体大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43428899/