Looking for Help with aligning words within a Header to the Center of the Page
Hi! This is my first time posting.
I'm trying to get "Home" "apply for a loan" "location and hours" and about to center themselves in the middle of the email template. I can get the text to align centered but not the words to the whole doc.
I am seriously at my wits end here! Gah!
Here's the header:
<ul>
<tr>
<td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>
<li><a href="https://www.foundersfcu.com/">Home</a></li>
<li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60hikLZOwmVrho3eAOs6aHAHgXG2roxjRPxfyrPMyo_UHdICZ14OXc30E22ZmdlOky5z7CqbTd6Otf3zpAeyK5">Apply for a Loan</a></li>
<li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>
<li><a href="https://www.foundersfcu.com/about-founders">About</a></li>
</tr>
</a></li>
</ul>
And here's some of the email template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
.ReadMsgBody { width: 100%; background-color: #ffffff; }
.ExternalClass { width: 100%; background-color: #ffffff; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Sans-serif !important; }
table { border-spacing: 0; table-layout: fixed; margin: 0 auto; }
table table table { table-layout: auto; }
img { display: block !important; overflow: hidden !important; }
.yshortcuts a { border-bottom: none !important; }
a { color: #FFFFFF; text-decoration: none; }
img:hover { opacity:0.9 !important;}
.textbutton a { font-family: 'open sans', arial, sans-serif !important;}
.btn-link-1 a { color: #FFFFFF !important; }
/*Responsive*/
@media only screen and (max-width: 640px) {
body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}
.table-inner { width: 90% !important; max-width: 90%!important;}
.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}
.hide {width: 0px !important; height: 0px!important; display: none!important;}
}
@media only screen and (max-width: 479px) {
body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}
.table-inner{ width: 90% !important; text-align: center !important;}
.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}
.hide {width: 0px !important; height: 0px!important; display: none!important;}
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
padding:
}
li a {
display: block;
color: #003366;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
background-color: #003366;
}
</style>
</head>
<body>
<!--start header-->
<ul>
<tr>
<td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>
<li><a href="https://www.foundersfcu.com/">Home</a></li>
<li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60hikLZOwmVrho3eAOs6aHAHgXG2roxjRPxfyrPMyo_UHdICZ14OXc30E22ZmdlOky5z7CqbTd6Otf3zpAeyK5">Apply for a Loan</a></li>
<li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>
<li><a href="https://www.foundersfcu.com/about-founders">About</a></li>
</tr>
</a></li>
</ul>
<!--end header-->
</body>
</html>
</div>
</div>
</body>
</html>
<!--header bar-->
<table bgcolor="#ecf0f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="table-inner" width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="45"></td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f1">
<tr>
<td align="center">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--Logo-->
<table width="250" border="0" align="center" cellpadding="0" cellspacing="0" class="table-full">
<tr>
<td height="65" align="center" style="line-height: 0px;padding-left: 0px;padding-right: 0px;">
<a style="text-decoration: none;" href="https://www.foundersfcu.com/"><img width="250" src="http://membermail.foundersfcu.com/dm/Images/cu/Foun1/gl/email/Foun1152017903235b0fe188-a1__1_5_2017__9_3.png" style="max-width: 250px; margin: 0px; border-width: 0px; border-style: solid;" alt="Logo" /><!--This is where the old logo code ends, it started with styl max width on the line above-->
</a></td>
</td>
</tr>
</table>
AdChoices