Question

我正在尝试编写符合HTML-5标准的文档，该文档通过了 W3C验证器：http://validator.w3.org/check。
验证者抱怨每次使用＆lt; center＆gt;标签，并建议我应该使用CSS。不幸的是，CSS似乎无法使BLOCK居中水平。它可以将文本居中于＆＃39; text-align：center＆＃39;属性，但是试图使表格和图像居中失败我已经阅读了＆＃34; CSS中心指南＆＃34;在： http://www.w3.org/Style/Examples/007/center.en.html 但是它的所有例子也无法使表格或图像水平居中（至少在Firefox 36.0上）。任何人都可以建议如何使这张桌子居中？：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>CSS centering bug demo
</title>
<style type="text/css">
  .centered{ display: block;
             margin-left:auto;
             margin-right:auto;
             align: center;
             text-align: center;
             vertical-align: center;
             horizontal-align: center;
           }  
</style>
</head>
<body>  
  <div class="centered">
    <table width="60%">
      <tr>
        <td>Example Table</td>
        <td>which should be horizontally centered on the page.</td>
      </tr>
    </table>
  </div>
</body>
</html>

Answer 1

如果您希望表位于中心，请将centered课程设为table。

<table width="60%" class="centered">

您的css类中也有一些无效的属性。你只需要像这样使用保证金

.centered {
     margin-left:auto;
     margin-right:auto;
}

因此，底线将左右边距设为auto到您想要位于中心的元素。

Js Fiddle Example

Answer 2

要可靠地居中一个块元素，请执行以下全部：

指定右边距和左边距以及 - 这是关键 -
指定明确的宽度，例如，像素，不为百分比（％）。

div.center {
    margin-right: auto ;
    margin-left: auto ;
    width: 800px ;
    }

在一行中指定边距，例如，margin: auto ; 通常有效;但是，为了保持安全，请指定每个即。，margin-right: auto ; margin-left: auto ;。

这项技术是否与规则相符，我不知道 - 但我的经验是它确实可靠地工作。

当然，不能将width:指定为百分比是令人讨厌的！

Answer 3

使具有固定宽度的块级元素居中：

margin-left: auto;
margin-right: auto;

div {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #000;
}

<div>I am block-level with fixed with</div>

将内联级别的孩子集中在一起：

text-align: center;

div {
  text-align: center;
  border: 1px solid #000;
}
span {
  display: inline-block;
  border: 1px solid #00f;
}

<div>
  <span>I am inline-level</span>
</div>

将宽度调整为内容的块级包装器居中：

display: table;
margin-left: auto;
margin-right: auto;

div {
  display: table;
  margin: 0 auto;
  border: 1px solid #000;
}
p, span {
  border: 1px solid #00f;
}

<div>
  I am a block-level centered wrapper
  <p>I am block-level child</p>
  <span>I am inline-level child</span>
</div>

Answer 4

我认为CSS只是破坏/不正确。它没有做关于定心的关于锡的说法。我将继续使用＆lt; center＆gt;元件。

Answer 5

所提出的方法都不适用于＆lt; math＆gt;要素：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>CSS centering bug demo
</title>
<style type="text/css">
 .centered_block{ display: block;      /* this works ONLY for block elements with a fixed width  */
            margin-left:auto;
            margin-right:auto;
          }  
 .centered_text  {
            text-align: center;  /* this works ONLY for inline elements */
          }
 .centered_inline { text-align: center;  /* this works ONLY for inline block */
            display: inline-block;
            text-align: center;
            margin-left:auto;
            margin-right:auto;     
          }    
</style>
</head>
<body>
  <math class="centered_block">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
  <math class="centered_text">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
  <math class="centered_inline">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
</body>
</html>

所有数学元素都显示左对齐。我想它回到了＆lt; center＆gt; ...... HTML5＆amp;在现代浏览器中，CSS似乎指定不当/目前没有正确实现，并且似乎无法在没有＆lt; center＆gt;的情况下将这些元素集中在一起。

HTML5替代＆＃34; center＆＃34;用于CSS的块div？

5 个答案: