Why isn't this centering? - html

Question

I can't get this to center. I've tried adding aligns everywhere, and every different combination of tags. I know the HTML isn't great... but I'm just trying to get something functional right now - not worrying about best practices.
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><center><span class='icon-go'>No</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
Any help would be appreciated! Thanks!

Answer 1

These answers show there are different kinds of "centering" in CSS, let's call these two text centering and block centering. The 'text-align' property governs where lines of text flush up, right, left, center, justified (right and left with extra padding between the words to make them flush up). This is what usually is thought of as "centering", and what you can see as icons in WYSIWYG text editing.
When you do layout you often have another centering task, you want one box to be in the center of another box. By the CSS way of thinking this is the box model (almost everything is a box to CSS), and you can reformulate "center this box inside that box" into "make sure that the left margin and the right margin of the inner box are the same". For instance if the outer box is 200 pixels wide, and the inner box is 120 pixels wide, you want the left margin = right margin, or in other words each margin will have to be 40 pixels. (40+120+40 = 200).
Hard-coding this is a lot of calculation, and it will break if either box changes size. Fortunately we have the margin: auto value which does it for us (it does "OK, this box is 120 pixels wide, we have room for 200 pixels, then I'll split the extra 80 in half and give it to each margin"), and it will keep working even when the layout (and box sizes) change.
Finally we have vertical alignment. CSS doesn't do that satisfactory yet, but there is a trick. See http://www.w3.org/Style/Examples/007/center for more on this.
Oh, and the HTML 'center' element mixed those two above models, but it didn't do it very well. I would advise you to stay away from the center tag (besides it is a good idea to keep style apart from markup).

Answer 2

Get rid of the <center> tags:
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><span class='icon-go'>No</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
And use CSS to do the centering:
table {
text-align:center;
}
Demo: http://jsfiddle.net/w7rWx/
"Not worrying about best practices" is often a difficult way to "get something functional", especially cross-browser. It's in your best interest to at least make an effort, consider adopting a different approach towards HTML/CSS.

Answer 3

Try this css.
.center {
float: none;
margin: 0 auto;
padding: 0;
position: relative;
}
margin: 0 auto; does the trick of centering. BTW, mentioning the width attribute also will make sure that the right and left margins depending on the window size.

Answer 4

In the first <td>, you have your HTML organized like so:
<a><center><span></span></a></center>
You're closing the tags in the wrong order; from the other two lines, it looks like you meant to do:
<center><a><span></span></a></center>
And in the third <td>, you didn't close the <center> at all.
Here's a fiddle with those changes made, and it looks like it works.

Answer 5

As already said: get rid of the center tag…
As for code Wesley Murch already gave you a very good answer though it will apply to all your table. I you want your style to apply only to a few elements try this:
.center{
text-align:center;
}
And apply it to "td" element by writing:
<td class='navbar center'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>