CODEWITHSUNDEEP
htmlcss
Belter
Belter

Reputation: 3837

How to center multiple line text in html using css, just like <center>?

I have this html content:

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

Just adding <center>... </center> surround all these code, that is what I want. enter image description here Since <center> tag was deprecated in HTML, I want to use css instead of <center>. My css code likes this:

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

}

I got this: enter image description here

I tried everything I can find, but all of them not work for me. I use windows 7 and chrome, I have seen Why is the <center> tag deprecated in HTML? and Simple center a object with css and no hacks.

Upvotes: 0

Views: 2497

Answers (3)

Parth Patel
Parth Patel

Reputation: 3997

.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>

Upvotes: 1

Tommy
Tommy

Reputation: 134

there is a reason why you using <table>?

change your css:

    div.test {
text-align: center;
}

div table{
  margin: 0 auto;
}

fiddle

click here for your code

this will answer you why <center> is deprecated answer here

Upvotes: 2

Nishith Adhvaryu
Nishith Adhvaryu

Reputation: 437

use this

table { margin-left: auto; margin-right: auto; text-align: center; }

div.test { text-align: center; }

Upvotes: 0

Related Questions