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

Question

有 div 有

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

我得到这些结果：

我可以使用什么 css 使文本无论大小写都居中对齐？

Answer 1

见下例：

.capsule{
  border-radius:30px;
  height:30px;
  background:blue;
  position: relative;
  display:inline-block;
  padding:0 15px;
  text-align:center;
  color:#fff;
  font-family:Arial;
}

.capsule>span{
  position:absolute;
  width:100%;
  left:0;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.capsule > i {
    opacity:0; 
}

<div class="capsule">
  <span> ONE </span>
  <i> ONE </i>
</div>

<hr/>
<div class="capsule">
  <span> one </span>
  <i> one </i>
</div>
<hr/>
<div class="capsule">
  <span> TWO </span>
  <i> TWO </i>
</div>
<hr/>
<div class="capsule">
  <span> two </span>
  <i> two </i>
</div>

这将适用于除 IE 8 以外的所有浏览器。您可以查看工作示例 here。

Answer 2

你可以使用 flex:

.badge {
  width: 100px;
  height: 50px;
  border-radius: 50px;
  background: blue;
  color: white;
  display: flex;
  display: -webkit-flex; /* Safari prefix */
  justify-content: center;
  -webkit-justify-content: center; /* Safari prefix */
  flex-direction: column;
  -webkit-flex-direction: column; /* Safari prefix */
  font-family: Arial;
  font-size: 14px;
  text-align: center;
}

.badge.large {
  font-size: 24px;
}

<p>Large badge:</p>
<div class="badge large">
  ONE
</div>

<p>Normal badge:</p>
<div class="badge">
  two
</div>

JSFiddle

Answer 3

您还可以使用 table-cell 显示，它兼容大多数浏览器版本。

然后您只需使用 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 浏览器中测试了这段代码。你可以找到所有结果here（他们的一些主机坏了，因此是白色的镜头）。

您也可以将 flexbox 与

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

Answer 4

这是解决方案。问题基本上是 font Vertical Metrics 这实际上是问题。

如果可以，我建议使用google字体，

转到http://www.fontsquirrel.com/tools/webfont-generator

注意：不要使用列入黑名单的字体。如果你愿意，去申请执照。

上传你要使用的字体；
选择“专家…”
Select EOT Lite 如果需要 IE 支持；
在渲染部分，选中“修复垂直指标”； （这很重要）
这将修复垂直指标，这将解决您的 line-height 问题。

CSS推荐:

使用默认正文line-height 1.4 或 1.42857143 不要在 line-height: normal 上转发，因为不同的浏览器具有不同的默认值。

Answer 5

我认为最好的选择是在此处使用 em 和 ex。

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

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

查看 this Fiddle

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.

Answer 6

如果您的单词有升序（字母 x 的部分，如 ftlkidhjb）或降序（如 jyqp），那么文本会从按钮的边缘伸出。这就是为什么它看起来不居中的原因。让它感觉居中的唯一解决方案是使按钮高达行高的 2 或 3 倍。

Answer 7

要使小写文本对齐，您必须手动偏移它以补偿大写文本必须占用的额外高度，但这会使大写文本错位。您可以使您的 div 看起来内联或 inline-flex 然后您可以简单地强制这些徽章中的所有文本为大写：

.up div {
  height: 15px;
  line-height: 15px;
  background-color: blue;
  color: white;
  border-radius: 500px;
  padding: 0.3em 0.7em;
  display: inline; 
  font-family: arial;
  text-transform: uppercase; 
}

<div class="up">
  <div>ONE</div> <div>One</div> <div>one</div>
</div>

或小写+偏移量：

.low div {
  height: 15px;
  line-height: 15px;
  background-color: blue;
  color: white;
  border-radius: 500px;
  padding: 0.2em 0.7em 0.4em 0.7em;
  display: inline; 
  font-family: arial;
  text-transform: lowercase;
}

<div class="low">
  <div>ONE</div> <div>One</div> <div>one</div>
</div>

这是 iPhone 5 上的输出：

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

How to vertically align lower case text in mobile safari?

css

mobile-safari

查看 this Fiddle