Difficulty aligning divs

Difficulty aligning divs

There are a number of similar topics, but none of the ones I looked at
have helped me solve the problem I've encountered. Basically, I have a set
of tabs that I want to be aligned in the center of my page. Unfortunately,
they appear slightly left of center, which looks absolutely terrible.
Maybe I missed something obvious, but after poking around with the code
for almost an hour, I'm starting to think the issue is a little more
complex.
I prepared a jsFiddle: http://jsfiddle.net/5NTY5/
<div style="text-align:center;">The tabs below should line up with this
text.</div>
<br/>
<div style="text-align:center;">
<ul class="_t_ul">
<li class="_t_li">Tab 1</li>
<li class="_t_li">Tab 2</li>
<li class="_t_li">tab 3</li>
</ul>
</div>
<br/>
<div style="text-align:center;">As you can see, it isn't even close.</div>
._t_ul {
line-height:33px;
list-style:none;
}
._t_li {
display: inline;
cursor:pointer;
text-align:center;
color: #698da5;
font-family:'Anton', sans-serif;
font-size: 14px;
font-weight:bold;
text-align:center;
padding:16px;
background-color: rgba(82%, 82%, 82%, 0.5);
border: 1px solid #acadaf;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
._t_li:hover {
background-color: rgba(82%, 82%, 82%, 0.8);
}
Also, I was able to get it to align properly using inline elements, but
I'd like to know if it's possible to do with block (such as li and div).