html - 如何在底部放置文本？

Question

我有一个header，我想在底部设置一个文本。我如何使用 HTML 和 CSS 做到这一点？

CSS

header {
  text-align: center;
  display: block; 
  background-color: red; 
  height: 15%;
}

HTML

<header>
  <font size="28.5" color="#2D6A17" face="Colonna MT" margin-top="5px">
    <%=id%>
  </font>
</header>

我怎样才能做到这一点？

Answer 1

让我们开始将您的 HTML 代码纳入标准:

<header>
   <div class="id"><%=id%></div>
</header>

你怎么看，我删除了 font 因为它已被弃用。但是我们可以使用 CSS 来设置元素的样式:

header {
  background-color: red;
  color: #2a6a17;
  display: block;
  font: normal 28.5pt 'Colonna MT'; 
  height: 150px;
  margin-top: 5px;
  text-align: center;
}

在这种情况下无法为 height 设置百分比，因此我将值更改为 150px。

有两种方法可以做到:

定位

首先，您需要在标题上添加position: relative;。

header {
  ...
  position: relative;
  ...
}

所以，现在很简单，您需要在 .id 元素上设置 position 和 bottom 属性:

header .id {
  bottom: 0;
  position: absolute;
  width: 100%;
}

结果:

查看实际效果:http://jsfiddle.net/caio/k7w5W/ .

表格

在这里，您需要将display 更改为table，并将width 设置为100%。

header {
  ...
  display: table;
  width: 100%;
  ...
}

现在，在 .id 上放置 display: table-cell; 后，您将能够使用 vertical-align 属性:

header .id {
  display: table-cell;
  vertical-align: bottom;
}

结果:

查看实际效果:http://jsfiddle.net/caio/M4RVh/ .