Centering a Div element with multiple different elements and classes inside - html

Question

I have been attempting to make a HTML-based email for a class I'm in. I have gotten to the footer where I would like a box at the bottom with a "legal disclaimer" and clickable links. I have gotten the box and all of the content inside of it, but I have been unable to center it (I have tried using text-align:center;)*
Heres a snippet of code from that section HTML and CSS included edited to exclude personal information
HTML:
<div>
<p class="footnote">Legal disclaimer here</p>
<p class="footnote">Please do not reply to this email.</p>
<a class="footnote" href="link" alt="broken link">link 1</a>
<a class="footnote" href="link" alt="broken link">link 2</a>
<a class="footnote" href="link" alt="broken link">link 3</a>
<a class="footnote" href="link" alt="broken link">link 4</a>
</div>
<--note the div shown here has its own class but I removed it for this example-->
CSS:
.div{
background-color: #f4f5f5;
border: none;
display:inline-block;
text-align: center;
}
.footnote{
font-size: 11px;
color: black;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Answer 1

Not sure of what you're trying to achieve, but if you want something like this
just center the container adding margin auto on its horizontal sides.
This is the code:
.centered {
background-color: #f4f5f5;
padding: 8px;
margin: 16px auto 0;
text-align: center;
}
.footnote {
font-size: 11px;
color: black;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<div>
<div>Content and stuff preceding footer...</div>
<div class="centered">
<p class="footnote">Legal disclaimer here</p>
<p class="footnote">Please do not reply to this email.</p>
<a class="footnote" href="link" alt="broken link">link 1</a>
|
<a class="footnote" href="link" alt="broken link">link 2</a>
|
<a class="footnote" href="link" alt="broken link">link 3</a>
|
<a class="footnote" href="link" alt="broken link">link 4</a>
</div>
</div>