html - 文本对齐方式不适用于垂直对齐方式

我有6个div，每个div都包含一个<p>和一个链接，我希望它们都居中，<p>在顶部，链接在底部。这是我的html（对于所有6个基本相同）：

<div id="home">
    <p>P</p>
    <a class="nav" href="index.html">home</a>
</div>

（所有6个都包装在<header>中）

这是我的CSS：

header div {
  width: 133.33px;
  height: 145px;
  text-align: center;
  font-size: 18px;
  padding-bottom: 3px;
  font-weight: lighter;
  float: left;
  display: table;
}

header div a {
  text-decoration: none;
  color: #474747;
  vertical-align: bottom;
  text-align: center;
  display: table-cell;
}

header div p {
  font-size: 60px;
  padding: 0;
  text-align: center;
  vertical-align: top;
  display: table-cell;
}

我无法让text-align: center与vertical-align同时工作。无论如何，不​​使用vertical-align就能获得顶部/底部的位置，还是要使text-align起作用？

最佳答案

我希望这是您要查找的代码：（这些不是您要查找的机器人）

.wrapper {
    text-align: center;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: table;
}
.container {
    display: table-cell;
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="container">
        <p>Hello World!</p>
        <a href="#">I am a Link!</a>
    </div>
</div>

按照Alohci的评论，如果您希望顶部的<p>标签和底部的<a>标签，则应使用position属性，如下所示：

.wrapper {
    position: relative;
    text-align: center;
    height: 200px;
    max-height: 200px;
    width: 200px;
    max-width: 200px;
    border: 1px solid black;
    display: table;
}
.container p {
    display: inline;
    vertical-align: top;
}
.container a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="wrapper">
    <div class="container">
        <p>Hello World!</p>
        <a href="#">I am a Link!</a>
    </div>
</div>

关于html - 文本对齐方式不适用于垂直对齐方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32043799/