html - 为什么这不是居中？

Question

我无法将其居中。我试过在任何地方添加对齐，以及每个不同的标签组合。我知道 HTML 不是很好...但我现在只是想获得一些功能性的东西 - 而不是担心最佳实践。

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

任何帮助将不胜感激!谢谢!

Answer 1

这些答案表明 CSS 中有不同类型的“居中”，我们称这两种为文本居中和 block 居中。 'text-align' 属性控制文本行在何处向上对齐、向右、向左、居中、对齐(向右和向左在单词之间添加额外的填充以使它们向上对齐)。这通常被认为是“居中”，您可以在所见即所得的文本编辑中看到图标。

当您进行布局时，您通常会有另一个居中任务，您希望一个框位于另一个框的中心。按照 CSS 的思维方式，这是盒子模型(几乎所有东西都是 CSS 的盒子)，您可以将“将这个盒子置于那个盒子的中心”重新表述为“确保内部盒子的左边距和右边距是相同”。例如，如果外框为 200 像素宽，内框为 120 像素宽，则您希望左边距 = 右边距，或者换句话说，每个边距必须为 40 像素。 (40+120+40 = 200)。

硬编码这是大量的计算，如果任一框改变大小，它就会中断。幸运的是，我们有 margin: auto 值，它为我们做了(它做“好的，这个框是 120 像素宽，我们有 200 像素的空间，然后我将额外的 80 分成两半并给每个边距” )，即使布局(和框大小)发生变化，它也会继续工作。

最后我们有垂直对齐。 CSS 做的还不够令人满意，但是有一个窍门。参见 http://www.w3.org/Style/Examples/007/center有关更多信息。

哦，HTML“center”元素混合了上述两种模型，但效果不是很好。我建议您远离中心标签(此外，将样式与标记分开是个好主意)。