1

I have an html page with some inline CSS. The content is on the left side.

HTML

<div style="text-align:center;"> <p style="font-size:14px">Insurance Certificate</p> <p style="text-align:center; font-size:12px">Mobile Phones, Tablets & Laptops Insurance Cover</p> <hr align="left" width="75%"> </div> <div style="width:50%; text-align:left; background-color : #EAEBEC "> <p style=""><b>Master Policy Number</b>: 260200/64/14/9500000018</p> <p style=""><b>Pack Reference No</b>:</p> </div> <table> <tr> <td colspan="2" style="font-size:10px; text-align:justify; width:50%">This is to certify that the device as described below in the schedule is covered under Special Contingency Policy issued by National Insurance Co. Ltd. (herein after called Insurer), subject to the terms, conditions, and exclusions as briefly contained overleaf.</td> </tr> <br /> <tr> <td width="240px" style="font-size:10px; font-weight:bold; text-align: right; ">Name of the Insured in full:</td> <td width="300px" style="font-size:10px; text-align: left; "> RICHARD</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> &nbsp;Address for communication:</b></td> <td width="300px" style="font-size:10px; text-align: left; "> 29 RAPHAELS HOUSE 5TH STREET, <br /> ANDAL NAGAR ALAPAKKAM, <br />CHENNAI, 600116</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Contact Number :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">9840619103</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> Email ID :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">[email protected]</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Brand & Model:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">iPhone 5s</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Purchase Date :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">30-12-2015 </td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>IMEI / Serial No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">352087071244199</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Sum Insured:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">25500.00</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Invoice No / Certification No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">IMV-S/5138/15/IMV</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Insurance Plans:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">All Risk</td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage Start Date & Time</td> <td style="font-size:10px; text-align: left; ">30-12-2015, 13:29:04</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage End Date</td> <td style="font-size:10px; text-align: left; ">29-12-2016</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Code</td> <td style="font-size:10px; text-align: left; ">IMV</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Name</td> <td style="font-size:10px; text-align: left; ">IMAGINE-VADAPALANI</td> </tr> </table> <div> <p> Any communication in respect to this policy may be sent to the facilitator mentioned below. <br /> <b>Edelweiss Insurance Brokers Limited</b> <br />Unit No.102, 10th Floor, Sakhar Bhavan, 230 Nariman Point, Mumbai 400021 Tel 22-42639603/ <br /> 18605005200 <b>Business Hours</b> Monday to Friday 10 am to 6 pm <b>eMail</b> [email protected] </p> </div>

I am not getting how to center the content.

Improve this question
4
  • Try <body style="margin:0 auto;"> Commented Jan 11, 2016 at 5:31
  • no its not reflecting Commented Jan 11, 2016 at 5:38
  • 1
    jsfiddle.net/ymaate4c/1 I used here Your code put inside a DIV tag with style. Commented Jan 11, 2016 at 5:41
  • ya its working, thnx Commented Jan 11, 2016 at 6:01

6 Answers 6

Reset to default
2

Try this,

<body > <div id="container" style="width:80%;margin-left:auto;margin-right:auto;"> <!-- Your HTML code --> </div> </body>

Hope it will work...

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Try to wrap the table in a div and put the style as margin: 0 auto; for that div.

Something like this:

<div style="margin: 0 auto;"> <table> ... </table> </div>
Improve this answer

Comments

0

Simple, just wrap all the contents in a div and position it.

Just insert the following line right after the beginning of the <body> tag,

<div style="top:0px;bottom:0px;left:0px;right:0px;margin:auto;">

and right before the closing of </body> tag, include a </div> tag and that would center all the content both vertically and horizontally.

Hope this helps. :)

Improve this answer

Comments

0

One solution is to put <center> before <div> and close it after closing div. HTML:

 <center> <div style="text-align:center;"> <p style="font-size:14px">Insurance Certificate</p> <p style="text-align:center; font-size:12px">Mobile Phones, Tablets & Laptops Insurance Cover</p> <hr align="left" width="75%"> </div> <div style="width:50%; text-align:left; background-color : #EAEBEC "> <p style=""><b>Master Policy Number</b>: 260200/64/14/9500000018</p> <p style=""><b>Pack Reference No</b>:</p> </div> <table> <tr> <td colspan="2" style="font-size:10px; text-align:justify; width:50%">This is to certify that the device as described below in the schedule is covered under Special Contingency Policy issued by National Insurance Co. Ltd. (herein after called Insurer), subject to the terms, conditions, and exclusions as briefly contained overleaf.</td> </tr> <br /> <tr> <td width="240px" style="font-size:10px; font-weight:bold; text-align: right; ">Name of the Insured in full:</td> <td width="300px" style="font-size:10px; text-align: left; "> RICHARD</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> &nbsp;Address for communication:</b></td> <td width="300px" style="font-size:10px; text-align: left; "> 29 RAPHAELS HOUSE 5TH STREET, <br /> ANDAL NAGAR ALAPAKKAM, <br />CHENNAI, 600116</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Contact Number :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">9840619103</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> Email ID :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">[email protected]</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Brand & Model:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">iPhone 5s</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Purchase Date :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">30-12-2015 </td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>IMEI / Serial No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">352087071244199</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Sum Insured:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">25500.00</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Invoice No / Certification No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">IMV-S/5138/15/IMV</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Insurance Plans:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">All Risk</td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage Start Date & Time</td> <td style="font-size:10px; text-align: left; ">30-12-2015, 13:29:04</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage End Date</td> <td style="font-size:10px; text-align: left; ">29-12-2016</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Code</td> <td style="font-size:10px; text-align: left; ">IMV</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Name</td> <td style="font-size:10px; text-align: left; ">IMAGINE-VADAPALANI</td> </tr> </table> <div> <p> Any communication in respect to this policy may be sent to the facilitator mentioned below. <br /> <b>Edelweiss Insurance Brokers Limited</b> <br />Unit No.102, 10th Floor, Sakhar Bhavan, 230 Nariman Point, Mumbai 400021 Tel 22-42639603/ <br /> 18605005200 <b>Business Hours</b> Monday to Friday 10 am to 6 pm <b>eMail</b> [email protected] </p> </div> </center>

I've also created a jsfiddle for you: https://jsfiddle.net/Lxbzfptj/

Improve this answer

Comments

0

You can put align="center" before closing the <div>, like this:

<div align="center"> <p style="font-size:14px">Insurance Certificate</p> <p style="text-align:center; font-size:12px">Mobile Phones, Tablets & Laptops Insurance Cover</p> <hr align="left" width="75%"> </div> <div style="width:50%; text-align:left; background-color : #EAEBEC "> <p style=""><b>Master Policy Number</b>: 260200/64/14/9500000018</p> <p style=""><b>Pack Reference No</b>:</p> </div> <table> <tr> <td colspan="2" style="font-size:10px; text-align:justify; width:50%">This is to certify that the device as described below in the schedule is covered under Special Contingency Policy issued by National Insurance Co. Ltd. (herein after called Insurer), subject to the terms, conditions, and exclusions as briefly contained overleaf.</td> </tr> <br /> <tr> <td width="240px" style="font-size:10px; font-weight:bold; text-align: right; ">Name of the Insured in full:</td> <td width="300px" style="font-size:10px; text-align: left; "> RICHARD</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> &nbsp;Address for communication:</b></td> <td width="300px" style="font-size:10px; text-align: left; "> 29 RAPHAELS HOUSE 5TH STREET, <br /> ANDAL NAGAR ALAPAKKAM, <br />CHENNAI, 600116</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Contact Number :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">9840619103</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b> Email ID :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">[email protected]</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Brand & Model:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">iPhone 5s</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Device Purchase Date :</b></td> <td width="300px" style="font-size:10px; text-align: left; ">30-12-2015 </td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>IMEI / Serial No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">352087071244199</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Sum Insured:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">25500.00</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Invoice No / Certification No:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">IMV-S/5138/15/IMV</td> </tr> <tr> <td width="240px" style="font-size:10px; text-align: right; "><b>Insurance Plans:</b></td> <td width="300px" style="font-size:10px; text-align: left; ">All Risk</td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage Start Date & Time</td> <td style="font-size:10px; text-align: left; ">30-12-2015, 13:29:04</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Coverage End Date</td> <td style="font-size:10px; text-align: left; ">29-12-2016</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Code</td> <td style="font-size:10px; text-align: left; ">IMV</td> </tr> <tr> <td style="font-size:10px; text-align: right; ">Store Name</td> <td style="font-size:10px; text-align: left; ">IMAGINE-VADAPALANI</td> </tr> </table> <div> <p> Any communication in respect to this policy may be sent to the facilitator mentioned below. <br /> <b>Edelweiss Insurance Brokers Limited</b> <br />Unit No.102, 10th Floor, Sakhar Bhavan, 230 Nariman Point, Mumbai 400021 Tel 22-42639603/ <br /> 18605005200 <b>Business Hours</b> Monday to Friday 10 am to 6 pm <b>eMail</b> [email protected] </p> </div>

I've also created a CodePen and a for you.

Improve this answer

Comments

-1 
body{ text-align : center; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.