Question

我有span的文字和div包装。我试图将文本置于span的中心位置。我尝试使用flexbox将其置于中心位置，但它无效。它水平居中但不垂直居中。我做错了什么，我该如何解决？

（span存在的唯一原因是我可以将文本居中。如果我可以不使用span来居中文本，那么我就不会使用它。）< / p>

JSFiddle

＆＃13;

#headerScrollDown {
  font-size: 85px;
  font-family: monospace;
  border: 2px solid black;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div id="headerScrollDown"><span>&#155;</span>
</div>

＆＃13;

Answer 1

中心文字工作，尝试用X替换箭头图标。它在中间是理想的。问题出在这个图标上。

Answer 2

您的问题是等宽字体的字符没有垂直对齐，因此您需要稍微调整尺寸才能使其正常工作。

检查此示例：

＆＃13;

#headerScrollDown {
  font-size: 85px;
  font-family: monospace;
  border: 2px solid black;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#headerScrollDown span {
  line-height: 75px;
  margin-top: -5px;
}

＆＃13;

<div id="headerScrollDown"><span>&#155;</span>
</div>

＆＃13;

Answer 3

这取决于使用的字体。在Mac上，默认的等宽字体是Courier，它有轻微的偏移量。尝试更改字体以获得更均匀的结果。 CSS只对同一种字体统一工作。

例如，对于Courier，您可以添加

span{ transform: translateY(-9%); }

到跨度并使其垂直居中。对于所有字体大小，使用px调整margin-top将不一致。

我的最终建议是明确定义font-family，因为默认字体可以根据操作系统而改变。

Answer 4

首先，您必须为垂直排列定义高度。然后，您必须在行高和文本字体大小之间找到平衡。

＆＃13;

#headerScrollDown {
  font-size: 85px;
  font-family: monospace;
  border: 2px solid black;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#headerScrollDown > span {
    height: 54px;
    line-height: 46px;
}

＆＃13;

<div id="headerScrollDown"><span>&#155;</span>
</div>

＆＃13;

您可以更轻松地看到差异：https://jsfiddle.net/mz77dnk5/

中心文字不起作用

JSFiddle

4 个答案: