[英]Using pull-right inside element aligns the text with the center. How do I align it with the baseline
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. 因此,我环顾四周,几乎在所有地方都发现了这个问题的反面。 That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out. 这使我感到这要么是罕见的情况,要么是我无法弄清的琐碎事情。
https://jsfiddle.net/je5dpqrL/ https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2>
element within which I've put an anchor tag with the pull-right
class of Bootstrap. 上面的jsFiddle显示我有一个<h2>
元素,在其中放置了带有Bootstrap pull-right
类的锚标记。 Since I want the anchor to display in a smaller font, I'm using font-weight
and font-size
. 由于我希望锚点以较小的字体显示,因此我使用font-weight
和font-size
。 Now, since it's floating, the text is centered. 现在,由于它是浮动的,因此文本居中。
Is there any way to align the text so that the baseline of the Title and the <a>
element is the same? 有什么方法可以对齐文本,以使Title和<a>
元素的基线相同?
You can adjust the vertical position of the <a>
with line-height (and use for example em
to make it relative size): 您可以使用行高调整<a>
的垂直位置(并使用例如em
来使其相对大小):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2 . 这就是您需要的https://jsfiddle.net/p05bu4c2 。 Create a span inside the link 在链接内创建一个跨度
.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>
So, The following code seems to work: 因此,以下代码似乎有效:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block
to an element inside the .pull-right
class seems to fix it. 事实证明,向.pull-right
类中的元素添加.inside-block
似乎可以解决该问题。 No need to play around with line-height
s 不需要玩line-height
JSFiddle: https://jsfiddle.net/je5dpqrL/10/ JSFiddle: https ://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a>
tag, although the CSS is completely different from the one suggested by him. 编辑:感谢戴蒙德(Diamond)提出的在<a>
标记内添加元素的建议,尽管CSS与他建议的完全不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.