html - 水平和垂直居中网站

标签 html css

查看http://www.eveo.org
方便修改的下载地址:
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip

正如您现在看到的,它使用简单的表格方法水平和垂直居中:

<table cellpadding="0" cellspacing="0">
   <tr>
      <td align="left">
         *put anything in here and it will be aligned horizontally and vertically
      </td>
   </tr>
</table>

accompanying CSS:  

table 
{
height: 100%;
width: 100%;
vertical-align: middle;
}

但是,在我的文档中我没有设置文档类型,我只有:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  

如果我添加如下标准文档类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

我的表方法不再有效并且不起作用。因此,无论浏览器窗口大小如何,我都需要一种使我的网页垂直和水平居中的新方法。

最佳答案

有一些不需要 Javascript 或黑客攻击的跨浏览器解决方案。

一个很好的例子是 here

也看看 this一个。

对于一些学习,查看这个优秀的 example关于 CSS 中水平对齐的 gtalbot。

祝你好运>)

关于html - 水平和垂直居中网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7064853/

相关文章:

javascript - 单击时在父元素上添加/删除事件类

html - 如何根据 BeautifulSoup 的特定链接抓取文本?

javascript - spin.js/Angular 微调器 : how to position spin into DOM element (plunker demo included)

css - 如何使用css3围绕自身旋转div?

Jquery鼠标悬停改变背景颜色

javascript - 如何将身份验证详细信息传递给 iframe 内的应用程序?

javascript - 从 <audio> HTML 中隐藏进度条

jquery - 无法使用 jQuery 在非 Webkit 浏览器中获取样式

css - 移动优化 CSS

html - 覆盖 span 和 b 元素的宽度