Question

我一直认为用<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>

我想做两件事：

在保持div位于页面中心的同时摆脱<center>标签。
确保外部DIV背景颜色和边框影响内跨。

更新：目标1完成。目标＃2的时间。

Answer 1

在随附的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

Answer 2

如果你想简单地将文本居中，你就是这种css风格：

text-align:center;

但是，如果你想要将元素或div本身居中，那就相当了一些解决方案，一个在下面：

.mydiv
{
  margin:0 auto;
}

甚至是这样的事情：

.mydiv
{
  width:300px; // the width can sometimes be ignored based on inherent size of element.
  margin-left:auto;
  margin-right:auto;
}

甚至是这样的事情：

.mydiv
{
  margin-left:50%;
  margin-right:50%;
}

所以你看，可能会有更多的可能性。

Answer 3

内联内容与text-align对齐，块内容与边距对齐（对于居中情况设置为auto）。请参阅Centring Using CSS。

Answer 4

如果你试图将div放在页面中心，我通常会使用这种方法将主包装div放在页面中心。

将左侧定位设为50％，然后将后边距保留为div的左半部分。

以下示例。

#mainspace {
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:auto;
    width:900px;
    border:none;
    }

Answer 5

试试这个，当我希望我还有那个时，它对我有用

<center>

标签

< p style="text:align-center" >  example image or text < / p >

HTML：替换<center> </center>

5 个答案: