如何在底部放置文字？

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

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

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

结果：

查看实际操作：http://jsfiddle.net/caio/k7w5W/。

表

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

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

现在，在display: table-cell;放置.id之后，您就可以使用vertical-align属性了：

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

结果：

查看实际操作：http://jsfiddle.net/caio/M4RVh/。

Answer 2

首先：

在您的示例中，正确的HTML和样式应如下所示：

header
{ font-family:Colonna MT;
 font-size:12px;
 color:#2D6A17;
text-align:center;
display:block; background-color:red;
 height:15%;
 margin-top:5px;
}


<header>  <p>  test  </p>   </header>

第二

如果要调整p标签，可以设置宽度和高度或为其设置位置。