文本对齐到绝对底部

问题描述：

我试图推动我的头文本，以便每个字符的底部都触及div的底部。几乎就好像div的边框为每个字母加下划线。我怎么做到这一点？我基本上试图推动我有一些像素的文字。文本对齐到绝对底部

答

一种方法是容器的位置设置为相对的，子元素绝对：

<div style="position:relative;height:200px;border:1px solid #ccc;"> 
    <div style="position:absolute;bottom:0px;left:0px;"> 
     I'm a bottom feeder... 
    </div> 
</div>

编辑

只是为了澄清，我没有使用line-height，因为它如果文本换行到新行，则表现不正确。

查看这里查看不同技术的细分。使用相对与绝对定位特别注意的例子：

http://jsfiddle.net/c2tqZ/1/

答

CSS：

text{ 
    vertical-align:baseline; 
    }

类似的东西？实现这一

您确定这是否行？你试过了吗？ –

答

http://jsfiddle.net/g835a/4/

的style.css

.header 
{ 
    border: 1px solid red; 
    height: 100px; 
    position: relative; 
} 

#header-content { position: absolute; bottom: 0; left: 0; }

HTML：

<div class="header"> 
    <h1>Title</h1> 
    <div id="header-content">Some content</div> 
</div>

+1：这可以通过两种方式完成，这是更好的解决方案。 –

答

“问题” 你是遇到是由字体引起的。字体通常会在字母之下留下空间来解释诸如“j”和“g”之类的下位字。您将需要相应地调整底部属性的负值。

在magnum2002的小提琴中将底部值从0更改为-5，并且工作正常。

文本对齐到绝对底部

相关推荐