Question

使用

的div

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

我得到了这些结果：

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

Answer 1

您还可以使用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 2

我认为最好的办法是与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 3

见下面的例子：

.capusle{
  border-radius:30px;
  height:30px;
  background:blue;
  position: relative;
  display:inline-block;
  padding:0 15px;
  text-align:center;
  color:#fff;
  font-family:Arial;
}

.capusle>span{
  position:absolute;
  width:100%;
  left:0;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.capusle > i {
    opacity:0; 
}

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

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

Answer 4

您可以使用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 5

这是解决方案。问题基本上是字体垂直度量标准，实际上是问题。

如果可以的话，我建议使用谷歌字体，

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

注意：请勿使用黑名单字体。如果你愿意，可以去许可证。

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

CSS推荐：

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

Answer 6

如果你的单词有ascenders（字母的一部分高于字母x，如ftlkidhjb）或descender（如jyqp），那么文本将从按钮的边缘戳出来。这就是为什么看起来不集中的原因。让它感觉居中的唯一解决方案是使按钮高达线高的2或3倍。

Answer 7

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

＆＃13;

.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; 
}

＆＃13;

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

＆＃13;

或小写+偏移：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是iPhone 5上的输出：

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

7 个答案:

查看this Fiddle