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

Question

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

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.

You are worried about using the deprecated element ``, but apparently you have no qualms about `border`, `cellpadding` and `width` attributes, that are just as deprecated! — Mr Lister, Sep 17 '16 at 13:49
And I wish I could say you were using a table for layout purposes. (That would've been a reason to use a table, although not a valid one.) But you aren't, you're using a table for _no purpose at all!_ Why? Oh, and the unquoted src URL makes me itch. — Mr Lister, Sep 17 '16 at 13:51

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

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

edited May 23 '17 at 11:48

Community

1
1

answered Sep 05 '16 at 04:46

Tommy

134
9

Wow! It works for me, but can you give me an explanation? What does auto margin in table do? – Belter Sep 05 '16 at 04:58
1

when you set the margin to auto the element will then take up the specified width, and the remaining space will be split equally between the left and right margins. 0 before mean - zero margin top and bottom. – Tommy Sep 05 '16 at 05:02
look at this example without table tag. https://jsfiddle.net/ak2o76pj/3/ – Tommy Sep 05 '16 at 05:05

score 1 · Answer 2 · answered Sep 05 '16 at 04:59

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

score 0 · Answer 3 · answered Sep 05 '16 at 04:53

0

use this

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

div.test { text-align: center; }

answered Sep 05 '16 at 04:53

Nishith Adhvaryu

427
2
6
12

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

3 Answers3