Question

所以，我环顾四周，而且我发现这个问题的反面几乎无处不在。这让我觉得这是一个罕见的事情，或者是一些我无法弄清楚的微不足道的事情。

上面的jsFiddle显示我有一个<h2>元素，我在其中放置了一个带有pull-right类Bootstrap的锚标记。由于我希望锚点以较小的字体显示，因此我使用font-weight和font-size。现在，因为它是浮动的，所以文本居中。

有没有办法对齐文本，以便Title和<a>元素的基线相同？

Answer 1

您可以使用行高调整<a>的垂直位置（并使用例如em使其相对大小）：

.cl {
    font-weight: normal;
    font-size: 40%;
    display: inline-block;
    line-height:4em
}

Answer 2

这就是您所需要的https://jsfiddle.net/p05bu4c2。在链接中创建一个范围

.cl {
	font-weight: normal;
	font-size: 40%;
	display: inline-block;
}
.cl span {
	line-height: 1;
	vertical-align: bottom;
}

h2 {
    border:1px solid #ff0000;
}

<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>

Answer 3

所以，以下代码似乎有效：

<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>

事实证明，向.inside-block类中的元素添加.pull-right似乎可以解决这个问题。无需使用line-height s

JSFiddle：https://jsfiddle.net/je5dpqrL/10/

编辑：感谢Diamond提出的在<a>标签内添加元素的建议，尽管CSS与他建议的完全不同。

使用右拉内部元素将文本与中心对齐。如何将其与基线对齐

3 个答案: