html - 如何在 CSS 中获得对齐 ="center"效果并与 XHTML 兼容并使其在大多数浏览器上工作

我正在尝试让一些 HTML 页面更符合要求，并且我从简单的事情开始，比如删除表格中的 align="center"等。

但是，我似乎无法使用 CSS 获得我想要的效果。我试过的东西包括

text-align:middle
vertical-align:middle

也是设计师 friend 推荐最多的

margin-left:auto; margin-right:auto; width: 100px

但在某些布局或某些浏览器(尤其是 IE6)下似乎都不起作用。是否有一种可靠的方法可以使用纯 CSS 来完成此操作并让它在大多数浏览器上运行？

编辑: 我的意思是 text-align: center;。匆忙打字。该页面已有 DOCTYPE，但我不确定它是否合适。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

最佳答案

它是:

text-align: center;

用于水平居中但是:

vertical-align: middle;

用于垂直居中，但这种方式的垂直居中几乎只适用于表格单元格。要在不使用表格的情况下获得跨浏览器的垂直居中，请查看 Vertical Centering in CSS (是的，这很重要)。

注意:text-align: middle 和vertical-align: center 是不正确的值。

要使 block 元素水平居中，通常的技巧是:

<div id="outer">
  <div id="inner">Some test...</div>
</div>

与:

#outer { width: 600px; }
#inner { width: 300px; margin: 0 auto; border: 1px solid black; }

请记住，在委婉的“怪癖”模式下，这不一定适用于某些版本的 IE。通过在文档顶部使用 DOCTYPE 强制 IE 进入(也是委婉的)“标准兼容”模式是一种很好的做法。

关于html - 如何在 CSS 中获得对齐 ="center"效果并与 XHTML 兼容并使其在大多数浏览器上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1501784/