如何在移动游猎中垂直对齐小写文本？

Question

有一个div

height: 15px;
line-height: 15px;

我得到这些结果:

我可以使用什么css将文本对齐到中间而不管它的情况如何？

Answer 1

您还可以使用table-celldisplay,它与大多数浏览器版本兼容.

然后你只需要使用text-align并vertical-align使其完美居中.

body, html {
  height: 100%;
}

body {
  margin: 3rem;
}

span {
    background-color: #4900CE;
    color: white;
    border-radius: 500px;
    padding: 1rem;
    min-width: 2.5rem;
    
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

<span>ONE</span>
<br>
<span>one</span>

我已经继续使用Browserstack在大多数iOS浏览器中测试此代码.你可以在这里找到所有的结果(他们的一些主机被打破,因此白色镜头).

您也可以使用类似的方法使用flexbox

span {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 2

我认为你最好的选择是em和ex这里一起工作。

我注意到大写字母默认情况下似乎是垂直居中的。大多数时候，它们的高度约为三分之二，1em而小写字母的高度几乎总是精确的 1ex。

知道这些后，您可以为小写字母指定偏移量calc(((-1em / 1.5) + 1ex) / 2)，这会将文本向上移动大写字母大小的一半，向下移动小写字母大小的一半。
为了能够做到这一点，您必须进行一些填充技巧，或者简单地将文本包装到另一个元素中，例如span.

看看这个小提琴

html, body { height: 100% } *, ::before, ::after { position: relative }

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex.sans {
  font-family: sans-serif;
}

.flex div {
  font-size: 17vh;
  background-color: #40C;
  color: white;
  border-radius: 1000px;
  padding: .5em 1em;
  margin: .25em;
}

@media (max-width: 200vh) { .flex div { font-size: 8.5vw } }

.flex div::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - .5px);
  left: 0;
  right: 0;
  height: 1px;
  background-color: #FFF;
}

.flex.centered div:last-child span {
  top: calc(((-1em / 1.5) + 1ex) / 2);
}

<div class="flex">
  Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered">
  Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex sans">
  Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered sans">
  Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>

这很有可能立即发挥作用。如果没有，您可以尝试更改1.5为其他值，例如1.4或1.75。