垂直对齐符号和文本

Question

我有STARS这个词后跟5星(★)

我遇到的问题是星星比单词小,我希望它们垂直对齐,但无法弄清楚如何.

这就是我正在尝试的东西:这里也是小提琴

html, body {
  font-size: 100%; /* for our beloved IE */
  font-size: 12px;
  line-height: 1.2em;
  color: #333;
}
h3 {
  font-size: 2em;
  line-height:1em;
  font-weight: 100;
}
.stars {
  opacity: 0.6;
  font-size: 0.7em;
  vertical-align: middle; /* <-- I thought this would do it */
}

<h3>STARS <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></h3>

Answer 1

最简单的方法就是position: relative在上面放一个，然后把它们稍微抬高一点。

这是你不应该经常做的事情（如果你不知道自己在做什么，那么弄乱位置可能会让你的页面流动很快变得混乱），但它适用于像你这样的小情况：

html, body {
  font-size: 100%; /* for our beloved IE */
  font-size: 12px;
  line-height: 1.2em;
  color: #333;
}
h3 {
  font-size: 2em;
  line-height:1em;
  font-weight: 100;
}
.stars {
  opacity: 0.6;
  font-size: 0.7em;
  position: relative;
  bottom: .1em; /* em will make it work at any font size, thanks Xufox*/
}

<h3>STARS <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></h3>

根据您的喜好进行调整。我只加了一个 .1em 的凸起，因为我认为这在各种字体大小下看起来最好，但是你可以随意调整它直到你喜欢它为止。

至于为什么vertical-align不起作用，是因为该属性仅作用于inline元素，请参阅Rick Hitchcock的回答以获取更多详细信息。它h3不是内联块，因此没有任何东西可以与之对齐span！

虽然您可以更改显示以使其正常工作，但这并不是您真正想要的情况。该位置更适合将图标（例如字体很棒的图标）与其旁边的文本对齐。