将HTML特殊字符相对于父级对齐

Question

所以我在WordPress中为客户建立一个网站，并且设计在几个标题上有 square 句号，但他们使用的字体 round 完全停止。

我用短码解决了这个问题＆＃39; [停止]＆＃39;这将返回以下代码：

<span class="square-stop">&#9632;</span>

这是一个HTML方形符号■包裹在样式范围内。

但我似乎可以让它与文本对齐。请在此处查看示例：http://jsfiddle.net/9a8x844n/

<h1>This is a heading of some kind<span class="square-stop">&#9632;</span></h1>

Answer 1

使用以下css对齐 square ：

h1{
     position:relative;   
}
.square-stop {
    font-size: 0.7em;
    position: absolute;
    bottom: 0;

}

Answer 2

使用vertical-align：bottom;

http://jsfiddle.net/9a8x844n/2/

.square-stop {
    font-size: 0.7em;
    vertical-align: bottom;
}

Answer 3

我使用的是字体 Myriad Pro 导致Chrome出现此问题，我修复此问题，但将.square-stop字体设置为 Arial 。

您可以在此处查看我的修补程序：http://jsfiddle.net/9a8x844n/3/

.square-stop {font-size: 0.7em; font-family: Arial;}