代码之家 › 专栏 › 技术社区 › Faruz

html:replacement for<center>

xhtml html

Faruz · 技术社区 · 15 年前

我一直认为取代 <center> 标签 <div style="text-align:center;"> 会得到同样的结果。显然我错了。

这是我的HTML的一部分: (您也可以在我为这个问题创建的页面中看到它的实际作用: http://www.moviez.4pu.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保持在页面中心。
确保外部分隔线背景色和边框影响内部跨距。

更新: 目标1已完成。目标时间2。

5 回复 | 直到 15 年前

Gregory Pakosz 15 年前

使用 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

Sarfraz 15 年前

如果只想将文本居中,则使用此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%;
}

所以你看,还有更多的可能性。

Quentin 15 年前

内联内容与文本对齐,块内容与页边距对齐(居中时设置为自动)。见 Centring Using CSS .

-1

user48202 15 年前

如果您试图使DIV在页面上居中,我通常将此方法用于主包装DIV以使页面居中。

使左定位在50%处,然后将DIV宽度的左后半部分边缘化。

下面的例子。

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

-1

Pararth 11 年前

试试这个,它在我希望我还拥有它的时候对我有用。

<center>

标签

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