2016-01-11 4 views
1

У меня есть html-страница с некоторым встроенным CSS. Содержимое находится с левой стороны.Как разместить HTML-контент

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> 

я не получаю, как центр содержания.

+0

Try <тело стиль = «поле: 0 авто;»> –

+0

нет его не отражает – Ashish

+1

https://jsfiddle.net/ymaate4c/1/ Я использовал здесь Ваш код поместить внутри DIV тега со стилем. – MadOX

ответ

1

Попробуйте это,

<body > 
    <div id="container" style="width:80%;margin-left:auto;margin-right:auto;"> 

    <!-- Your HTML code --> 

    </div> 
</body> 

Надеется, что это будет работать ...

0

Попробуйте обернуть table в div и положите стиль как margin: 0 auto; для этого div.

Что-то вроде этого:

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

Простого, просто обертка всего содержимого в a div и расположите его.

Просто вставьте следующую строку сразу после начала <body> тега

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

и прямо перед закрытием </body> тега, включает в себя </div> тега и что бы центрировать все содержимое как вертикально, так и горизонтально.

Надеюсь, это поможет. :)

0

Одно решение поставить <center> перед тем <div> и закрыть его после закрытия 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> 

Я также создал jsfiddle для вас: https://jsfiddle.net/Lxbzfptj/

0

Вы можете поставить align="center" перед закрытием <div>, как это:

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

Я также создал CodePen и для вас.

Смежные вопросы