Question

我已经使用Blueprint来构建一个非常简单的页面布局...但是在阅读绝对与相对定位以及一些关于垂直定位的在线教程之后，我无法让事情按照我的方式工作认为他们应该。

这是我的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与徽标的底部对齐，实际上这意味着#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

不要改变蓝图类的定位或浮动。这将搞乱框架。

你要做的事情很难，因为你想要做的事情（我假设）是将类型的基线与图像的底部对齐。没有简单的方法可以通过CSS确定类型的基线。因此，将它们对齐将完全取决于为用户加载的特定字体。如果您的图像高50像素，您可以先将h1的行高设置为50像素，然后从那里进行调整。但要明白，从浏览器到浏览器，从字体到字体会有差异。

你可能最好不要使用标题的一部分来隐藏文字。

Answer 2

如果你正在努力实现这一目标，请告诉我们？

<强> HTML：

<div id="container">
    <div class="logo">Logo here</div>
    <h1>TITLE</h1>
</div>

<强> CSS：

#container{
    background-color:#ccc;
    position:relative;
    width:300px;
    height:200px;
}

.logo{
    width:110px;
    height:40px;
    background-color:#ff0000;
    margin: 0 auto;
}

#container h1{
    font-size:120%;
    font-weight:bold;
    text-align:center;
}

这是一个现场演示：http://jsfiddle.net/jrLL2/

将文本对齐到div的底部：我对CSS或蓝图感到困惑吗？

2 个答案: