为什么不是这个集中？

我无法将其置于中心位置。我试过在所有地方添加对齐，以及每个不同的标签组合。我知道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>

任何帮助，将不胜感激！谢谢！

来源

2011-08-19 Kris

试试这个css。

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

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

来源

2011-08-19 04:06:46 Mahesh

对不起 - 我该如何使用？我把它放到我的css文件中，但我应该在哪里引用它？ – Kris

@Kris您可以将'.center'更改为'.navbar'，这样一旦将代码放入css文件中，更改就会自动完成。 –

如果没有宽度，'margin：0 auto'是否有效？ – sdleihssirhc

在第一<td>，你有你的HTML举办像这样：

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

您要关闭标签在错误的顺序;与其他两条线，它看起来像你的意思做：

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

在第三<td>，你没有关闭<center>可言。

Here's a fiddle随着这些变化，它看起来像它的作品。

来源

2011-08-19 04:09:32 sdleihssirhc

摆脱<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采取不同的方法。

来源

2011-08-19 04:09:56

+1“很明显我没有看到它” – sdleihssirhc

+1表示“摆脱'

'标签”。那些太过时了！ – Nathan

'已被[弃用]（http://www.w3.org/wiki/HTML/Elements/center）很长一段时间，并有很好的理由 - 但浏览器仍然会遵守其行为（现在最小）。我怀疑这里的桌面布局也不是必需的。克里斯，如果你解释你想要的样子的要求，我会很乐意以一种干净的方式为你重写，这可能是一个很好的学习方式。 –

这些答案显示CSS中存在不同种类的“居中”，我们称这两个文本居中并阻止居中。 “文本对齐”属性决定了文本行向上，向右，向左，居中，对齐的位置（右边和左边的文字之间有额外的填充以使它们齐平）。这通常被认为是“居中”，你可以在WYSIWYG文本编辑中看到图标。

当你做布局时，你经常有另一个居中任务，你想要一个盒子在另一个盒子的中心。通过CSS的思维方式，这是盒子模型（几乎所有东西都是CSS的盒子），并且您可以重新制定“将该盒子放在该盒子的中心”为“确保内盒子的左边距和右边距为一样”。例如，如果外框宽200像素，内框宽120像素，则需要左边距=右边距，换句话说，每个边距必须为40像素。（40 + 120 + 40 = 200）。

硬编码这是一个很多的计算，并且如果任何一个盒子改变大小，它将会中断。幸运的是，我们有这样的保证金：自动价值，它为我们做了（它确实，“这个箱子宽120像素，我们有200像素的空间，然后我将多余的80分成两半，并将其分配给每个边距” ），并且即使在布局（和框大小）改变时它也将继续工作。

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

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

来源

2011-08-19 04:43:36

前面已经说了：摆脱中心标签...

至于代码韦斯利默奇已经给你一个很好的答案，虽然这将适用于所有的表。我想要你的风格，只适用于少数几个元素试试这个：

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

来源

2011-08-19 07:22:00

为什么不是这个集中？

回答

相关问题