为什么不是这个中心？

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中存在不同类型的"居中",让我们称这两个文本居中和块居中.'text-align'属性控制文本行向上,向右,向左,向中,对齐的位置(左右两侧之间有额外的填充以使它们齐平).这通常被认为是"居中",以及在WYSIWYG文本编辑中您可以看到的图标.

当您进行布局时,您经常会有另一个居中任务,您希望一个盒子位于另一个盒子的中心.通过CSS的思维方式,这是盒子模型(几乎所有东西都是CSS的盒子),你可以重新制作"将这个盒子放在那个盒子里","确保内盒的左边距和右边缘是相同".例如,如果外框宽200像素,内框宽120像素,则需要左边距=右边距,换句话说,每个边距必须为40像素.(40 + 120 + 40 = 200).

硬编码这是很多计算,如果任何一个框改变大小,它将会破坏.幸运的是我们有保证金:自动值对我们来说(它确实"好吧,这个盒子是120像素宽,我们有200像素的空间,然后我将额外的80分成两半,并给它每个边距" ),即使布局(和盒子尺寸)发生变化,它也会继续工作.

最后我们有垂直对齐.CSS还没有那么令人满意,但有一个技巧.有关详细信息,请参见http://www.w3.org/Style/Examples/007/center.

哦,HTML'center'元素混合了上面两个模型,但它并没有做得很好.我会建议你远离中心标签(此外,保持风格与标记不同是一个好主意).