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

Question

因此，我环顾四周，几乎在所有地方都发现了这个问题的反面。 这使我感到这要么是罕见的情况，要么是我无法弄清的琐碎事情。

https://jsfiddle.net/je5dpqrL/

上面的jsFiddle显示我有一个<h2>元素，在其中放置了带有Bootstrap pull-right类的锚标记。 由于我希望锚点以较小的字体显示，因此我使用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>

事实证明，向.pull-right类中的元素添加.inside-block似乎可以解决该问题。 不需要玩line-height

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

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