我有一个单词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">★★★★★</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">★★★★★</span></h3>
根据您的喜好调整.我只放了一个.1em,因为我认为在各种字体大小看起来最好,但是你喜欢它直到你喜欢它.
至于为什么垂直对齐不起作用,这是因为该属性仅作用于内联元素,请参阅Rick Hitchcock的答案以获得更多细节. h3不是内联块,所以没有什么可以对齐跨度！
虽然您可以更改周围的显示以使其正常工作,但这并不是您想要的情况.该位置更适合于将图标(如字体 – 真棒图标)与其旁边的文本对齐.
