html - 将文本对齐到 div 的底部 : am I confused about CSS or about blueprint?

Question

我已经使用 Blueprint 制作了一个非常简单的页面布局原型(prototype)...但是在阅读了绝对定位与相对定位以及大量关于垂直定位的在线教程之后，我无法按照我的方式进行操作认为他们应该。

这是我的 html:

<div class="container" id="header">
  <div class="span-4" id="logo">
    <img src="logo.png" width="150" height="194" />
  </div>
  <div class="span-20 last" id="title">
    <h1 class="big">TITLE</h1>
  </div>
</div>

该文档确实包含蓝图 screen.css 文件。

我希望 TITLE 与 Logo 的底部对齐，实际上这意味着 #header 的底部。

这是我的第一次尝试:

  #header {
    position: relative;
  }

  #title {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

回想起来，这并不出乎意料，这使 TITLE 与 #header 的左边缘齐平......但它未能影响标题的垂直定位。所以我得到的结果与我要找的完全相反。

所以我尝试了这个:

  #title {
    position: relative;
  }

  #title h1 {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

我的理论是，这会将 h1 元素与包含的 div 元素的底部对齐...但它反而使 TITLE 完全消失了。我想这意味着它正在某处渲染可见屏幕。

此时我感到困惑。我希望这里有人能给我指明正确的方向。谢谢!

Answer 1

不要更改蓝图类的定位或 float 。那会弄乱框架。

您尝试做的事情会很困难，因为您尝试做的(我假设)是将字体的基线与图像底部对齐。没有简单的方法可以通过 CSS 确定类型的基线。因此，让它们对齐将完全取决于为您的用户加载的特定字体。如果您的图像是 50 像素高，您可以先将 h1 的行高设置为 50 像素，然后从那里进行调整。但请注意，浏览器与浏览器、字体与字体之间会有差异。

您最好将标题作为图像的一部分，然后使用一些图像替换技术来隐藏文本。