Question

我想显示包含指数（以及更多）的计算。要设置行中的元素，请使用flexbox。在flexbox元素中，我想使用vertical-align CSS属性。但是vertical-align属性不起作用。

我用不同的方法对其进行了测试，最后一个解决方案起作用了。但是随后justify-content属性不再起作用。在尝试中，我使用了以下属性：flex Webkit版本：-webkit-box.

如果您要测试，这里是小提琴：https://jsfiddle.net/oe3hxfma/

.calculation {
  display: flex;
  justify-content: center;
  font-size: 1.3em;
}

.exponent {
  display: inline;
  vertical-align: super;
}

.calculationTwo {
  display: -webkit-box;
  justify-content: center;
  font-size: 1.3em;
}

<div class="calculation">
  3
  <div class="exponent">
    2
  </div>
</div>

<div class="calculationTwo">
  3
  <div class="exponent">
    2
  </div>
</div>

当父Elmenet显示为flexbox时，如何使用垂直对齐方式。

Answer 1

vertical-align属性仅适用于内联级元素和表单元格元素（MDN）。

由于exponent元素是flex容器的子元素，因此会自动 blockified （spec）。这意味着它将计算为块级元素，而vertical-align将被忽略。

如何为弹性项目定义display值并不重要（例如，在代码中，您将弹性项目设置为display: inline）。在flex formatting context中，flex项目的display值由flex算法控制。

使用vertical-align的关键是将其从弹性格式上下文中删除。创建一个元素作为flex项目的子元素。现在，指数值不在弹性布局的范围内，您可以将其设置为display: inline。

此外，由于文本与容器的顶部对齐，因此vertical-align: super没有可用的空间。因此，将文本对准容器的中心或底部。

添加align-items: flex-end或center（取决于您想要的上标数量）。

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}

<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

Answer 2

您应使用“ align-items”属性将项目垂直对齐：

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align

Answer 3

只是一个建议，为什么不尝试使用sup HTML标记进行指数计算呢？

<div>
3 <sup>2</sup>
</div>

对于vertical alignment，display:flex像上述答案一样使用align-items。

div
{
   display: flex;
    justify-content: center;
}

  <div>
    3 <sup>2</sup>
    </div>

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}

<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

Answer 4

您可以尝试给内容添加一些填充并使用align-items：flex的Stretch功能。

这是一个非常有用的flex指南！作为前端开发人员，把它放在口袋里真是太棒了！

Flexbox Guide!

垂直对齐属性在flexbox中不起作用

4 个答案: