text-align not working with vertical-align

Question

I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):

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

(all 6 are wrapped in a <header>)

This is my 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;
}

I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?

Answer 1

Here's the code you're looking for, I hope: (These are not the droids you're looking for)

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

following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:

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