Question

我的单词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>

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对齐！

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

Answer 2

vertical-align将有效，如果您添加display:table-cell或display:inline-block并将文字换成<span>并使用相同的display-property

html, body {
  color: #333;
}
h3 {
  font-size: 2em;
  font-weight: 100;
}
.text {
    display:inline-block;
    vertical-align: middle;
  }
.stars {
    display:inline-block;
    opacity: 0.6;
    font-size: .2em;
    vertical-align: middle;
}

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

Answer 3

您可以通过将h3表格行和.stars表格格式化来解决问题。

根据table height algorithm，当您在表格单元格上使用vertical-align: middle时：

细胞的中心与行的中心对齐跨越。

添加以下样式：

h3 {
  display: table-row;
}

.stars {
  display: table-cell;
}

<强>段：

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;
  display: table-row;
}

.stars {
  opacity: 0.6;
  font-size: 0.7em;
  vertical-align: middle;
  display: table-cell;
}

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

Answer 4

我认为所有 out：https://jsfiddle.net/p357agt2/2/。

渲染引擎对渲染事物的看法与你有不同的看法。我设法制作了reduced example你的布局：

首先：注意 STARS 这个词包含在<span>元素中。

<h3>
  <span>STARS</span><span>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

然后：这些是最低要求的规则。

span{
  vertical-align:middle;
}
span:first-child{
  font-size:40px;
}
span:last-child{
  font-size:12px;
}

所以我在你的JSFiddle中改变的是：

我完全删除了margin-bottom规则
我从vertical-align类

stars

我在<{1}}元素
中包含了 STARS 这个词
我将<span>应用于vertical-align:middle中的任何 span：h3

（可选）我将h3 span应用于margin-left:.3em;，以便在 STARS 和★★★★★¹
基本上，文本节点 STARS 需要位于.stars内才能使其正常工作。然后<span>需要应用于两者。

完整代码：

vertical-align

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 { margin-left: .3em; opacity: 0.6; font-size: 0.7em; } h3 span{ vertical-align: middle; }

据我所知，此修复程序更改了您的布局，代码和标准呈现（例如那些<h3> <span>STARS</span><span class="stars">★★★★★</span> </h3>解决方法）。

1：您也可以通过在源代码中的两个display:table-cell节点之间换行来获得空间，但在选择时它看起来很奇怪......

Answer 5

请参阅我在下面添加的内联样式属性，以演示如何修复它。

我使用内联样式进行演示 - 您需要将它们提取到您自己的样式表中。

<h3>
   <span style="display: inline-block; vertical-align: middle">STARS</span>
   <span class="stars" style="display: inline-block; vertical-align: middle">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

注意：我用标题包装标题文本以使其有效。您需要并排放置两个内联块元素，以便以这种方式垂直对齐。

注意：您还需要在两个跨度之间添加一些填充。

JSFiddle https://jsfiddle.net/p357agt2/16/

垂直对齐符号和文本

5 个答案: