html - 相对于父级对齐 HTML 特殊字符底部

Question

所以我正在为 WordPress 的客户构建一个网站，设计中有几个标题是方形句点，但他们使用的字体是圆形句点.

我已经用简码“[stop]”解决了这个问题，这将返回以下代码:

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

这是一个 HTML 正方形符号 ■ 包裹在一个 span 中以进行样式设置。

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

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

Answer 1

使用以下 css 对齐正方形:

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

}