0

我已经使用 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;
  }

My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.

At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!

4

2 回答 2

1

don't go changing positioning or floating of the blueprint classes. That will mess up the framework.

What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.

You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.

于 2011-03-17T01:37:17.553 回答
0

Give this a go and let me know if it is what you are trying to achieve?

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;
}

Here's a live demo: http://jsfiddle.net/jrLL2/

于 2011-03-17T01:19:31.977 回答