HTML:替换 <center>

标签 html xhtml

我一直认为替换 <center><div style="text-align:center;"> 标记会得到相同的结果。显然我错了。

这是我的 HTML 的一部分: (您还可以在我为此问题创建的页面中看到它的实际效果: http://www.catmoviez.com/ErrorPageSO.aspx

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
    <span style="width:560px;padding-right:10px;text-align:left;float:left;">
    <h1>Oops... We're sorry.</h1>

    <h3>You've just encountered an unknown error. <br /></h3>
    This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
    We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
    <br />
    <h3>
    You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.       
    </h3>
    </span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>

我想做两件事:

  1. 摆脱 <center>标记,同时将 div 保持在页面中央。
  2. 确保外部 DIV 的背景颜色和边框会影响内部 span。

更新: 目标 1 完成。 实现目标 #2 的时间到了。

最佳答案

使用 margin: 0 auto;在你的附件上<div>

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
  <span style="width:560px;padding-right:10px;text-align:left;">
  <h1>Oops... We're sorry.</h1>

  <h3>You've just encountered an unknown error. <br /></h3>
  This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
  We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
  <br />
  <h3>
  You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.           
  </h3>
  </span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>

See it in action .

引用:CSS: centering things

关于HTML:替换 <center>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1926864/

相关文章:

php - InlineScript 助手并不总是将脚本嵌入 CDATA

html - 可以将表单元素分组到 "p"中吗?

html - 你能发现这个 html 显示错误吗?

css - 为 div 扩展全高

javascript - 圆形按钮溢出的波纹效果

javascript - 使用 css 只打印隐藏内容

php - 列出 sql 的最后 10 行并将其打印在字幕中

html - Outlook 2007、2010 和 2013 中的响应式 2 列到 1 列电子邮件

javascript - 单击按钮时无法删除使用指令创建的表的选定行

html - 非矩形 CSS 图像链接