css – 垂直对齐符号和文本

我有一个单词STARS,然后是5星(★)

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

这是我正在尝试的：Fiddle here too

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>

解决方法

最简单的方法就是放置一个位置：相对位置并将它们稍微抬高一点.

这是你不应该经常做的事情(如果你不知道你在做什么,搞乱位置会使你的页面流动变得很乱),但它适用于像你这样的小情况：

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,因为我认为在各种字体大小看起来最好,但是你喜欢它直到你喜欢它.

至于为什么垂直对齐不起作用,这是因为该属性仅作用于内联元素,请参阅Rick Hitchcock的答案以获得更多细节. h3不是内联块,所以没有什么可以对齐跨度！

虽然您可以更改周围的显示以使其正常工作,但这并不是您想要的情况.该位置更适合于将图标(如字体 – 真棒图标)与其旁边的文本对齐.