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'属性控制文本行向上，向右，向左，向中，对齐的位置（左右两侧之间有额外的填充以使它们齐平）。这通常被认为是“居中”，以及您在所见即所得文本编辑中可以看到的图标。

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

硬编码这是一个很大的计算，如果任何一个框改变大小，它将会中断。幸运的是我们有余量：自动值对我们来说（它确实“好吧，这个盒子是120像素宽，我们有200像素的空间，然后我将额外的80分成两半，并给它每个边距” ），即使布局（和盒子尺寸）发生变化，它也会继续工作。

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

哦，HTML'center'元素混合了上面两个模型，但它并没有做得很好。我会建议你远离中心标签（除了将标记与标记区分开来是一个好主意）。

Answer 2

摆脱<center>代码：

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

使用CSS进行居中：

table {
    text-align:center;
}

演示：http://jsfiddle.net/w7rWx/

“不要担心最佳实践”通常是“获得某些功能”的难题，尤其是跨浏览器。至少要付出努力，考虑采用不同的HTML / CSS方法。

Answer 3

试试这个css。

.center {
     float: none;
     margin: 0 auto;
     padding: 0;
     position: relative;
}

margin: 0 auto;可以实现居中的诀窍。顺便说一句，提到width属性也会确保右边距和左边距取决于窗口大小。

Answer 4

在第一个<td>中，您的HTML组织如下：

<a><center><span></span></a></center>

您以错误的顺序关闭代码;从其他两行来看，它看起来像你要做的那样：

<center><a><span></span></a></center>

在第三个<td>中，您根本没有关闭<center>。

Here's a fiddle进行了这些更改，看起来很有效。

Answer 5

正如已经说过的那样：摆脱中心标签......

至于代码，Wesley Murch已经给你一个非常好的答案，虽然它适用于你的所有表。我希望你的风格只适用于几个元素试试这个：

.center{
    text-align:center;
}

并通过写：

将其应用于“td”元素

<td class='navbar center'>
        <a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>

为什么不是这个中心？

5 个答案: