如何使用 css 将 html 中的多行文本居中，就像 <center> 一样？

Question

我有这个 html 内容：

<div class="test">
  <a href=/cgi-bin/source/sourceSearch><img border=0 src=http://source-search.princeton.edu/images/SOURCE/sourcehdrBlue.gif></a>
  <h2 style='margin-bottom:0px'>BATCH</h2>
  <table border="0" cellpadding="0" width="600">
    <tr>
      <td><h3>SOURCE is now hosted by Princeton University. The supporting database was last updated on June 10, 2015. </h3> <p>This page is the batch extract interface for SOURCE.  You can input a list of GenBank Accessions, dbEST cloneIDs, UniGene ClusterIDs, UniGene gene names, UniGene gene symbols microarray Probes from various platforms (Affymetrix, Agilent, Heebo/meebo, Illumina) or coordinates (e.g.: chr1 14565 15000 - chromosome, from, to - one set per line) and retrieve data from the checklist below.  You will be given a link to the output file when processing is complete.</p> <p>You may enter the identifiers as a file or as a list in the text area below.  If you are entering an input file, it must be a text file consisting of a single column containing one of the accepted types of identifiers.</p> <p>Please see the <a href="http://source-search.princeton.edu/help/SOURCE/resultsBatchHelp.html">help</a> section for further information. Or go to <a href="http://source-search.princeton.edu/cgi-bin/source/sourceSearch">Single Entry SOURCE Search.</a> </p></td>
    </tr>
  </table>
</div>

只需添加<center>... </center> 包围所有这些代码，这就是我想要的。 由于<center> 标签在 HTML 中已被弃用，我想使用 css 而不是 <center>。我的 css 代码是这样的：

div.test {
margin-left: auto;
margin-right: auto;
text-align: center;

}

我得到了这个：

我尝试了所有我能找到的东西，但它们都不适合我。我使用的是 windows 7 和 chrome，我见过 Why is the <center> tag deprecated in HTML? 和 Simple center a object with css and no hacks。

Answer 1

你使用<table>是有原因的吗？

改变你的CSS：

    div.test {
text-align: center;
}

div table{
  margin: 0 auto;
}

小提琴

click here for your code

这将回答您为什么不推荐使用 <center> answer here

Answer 2

.test
{
  text-align:center;
}
   div table
   {
  margin: 0 auto;
   }

<div class="test">
  <a href=/cgi-bin/source/sourceSearch><img border=0 src=http://source-search.princeton.edu/images/SOURCE/sourcehdrBlue.gif></a>
  <h2 style='margin-bottom:0px'>BATCH</h2>
  <table border="0" cellpadding="0" width="600" style="text-align:center">
    <tr>
      <td><h3>SOURCE is now hosted by Princeton University. The supporting database was last updated on June 10, 2015. </h3> <p>This page is the batch extract interface for SOURCE.  You can input a list of GenBank Accessions, dbEST cloneIDs, UniGene ClusterIDs, UniGene gene names, UniGene gene symbols microarray Probes from various platforms (Affymetrix, Agilent, Heebo/meebo, Illumina) or coordinates (e.g.: chr1 14565 15000 - chromosome, from, to - one set per line) and retrieve data from the checklist below.  You will be given a link to the output file when processing is complete.</p> <p>You may enter the identifiers as a file or as a list in the text area below.  If you are entering an input file, it must be a text file consisting of a single column containing one of the accepted types of identifiers.</p> <p>Please see the <a href="http://source-search.princeton.edu/help/SOURCE/resultsBatchHelp.html">help</a> section for further information. Or go to <a href="http://source-search.princeton.edu/cgi-bin/source/sourceSearch">Single Entry SOURCE Search.</a> </p></td>
    </tr>
  </table>
</div>

Answer 3

使用这个

table { margin-left: auto;边距右：自动；文本对齐：居中； }

div.test { 文本对齐：居中； }