HTML - 在 html 表中設置圖像和文本的正確對齊方式
[英]HTML - Set proper alignment of image and text in html table
問題描述
我嘗試在 HTML 表中設置圖像和文本的對齊方式並使用 jsPDF 生成 pdf 但我無法設置正確的圖像對齊方式和文本，您的幫助挽救了我的一天
[![在此處輸入圖像描述][1]][1]
這是我的代碼，非常感謝您的幫助
<html> <head> <title>Theme1</title> </head> <body> <table style="width: 565px;margin: 15px; border:4px solid #ddd;font-size: 12px;position: relative; color: #212529"> <tr style="width: 100%"> <td style="width: 100%"> <table> <tr> <th style="text-align: center;" colspan="3" width="100%"> <h4>Biodata</h4> </th> </tr> <tr rowspan="4"> <td colspan="2" style="padding: 15px; width: 80%"> <table> <tr> <td style="width: 50%"> <b>Name</b> </td> <td style="width: 50%"> {{name}} </td> </tr> <tr> <td style="width: 50%"> <b>Father Name</b> </td> <td style="width: 50%"> {{fatherName}} </td> </tr> <tr> <td style="width: 50%"> <b>Father's Occupation</b> </td> <td style="width: 50%"> {{fatherOccupation}} </td> </tr> <tr> <td style="width: 50%"> <b>Mother Name</b> </td> <td style="width: 50%"> {{motherName}} </td> </tr> <tr> <td style="width: 50%"> <b>Mother's Occupation</b> </td> <td style="width: 50%"> {{motherOccupation}} </td> </tr> </table> </td> <td style="width: 20%"> <img src="{{profileImage}}" width="100" style="border-radius: 5px; border-width: 1px ;border-color: #4e555b; border-style: solid; width: 100px;" /> </td> </tr> <tr> <td width="35%"> <b>email</b> </td> <td width="35%"> {{email}} </td> </tr> <tr> <td width="35%"> <b>Date of Birth</b> </td> <td width="35%"> {{dob}} </td> </tr> <tr> <td width="35%"> <b>Place of Birth</b> </td> <td width="35%"> {{placeOfBirth}} </td> </tr> <tr> <td width="35%"> <b>Occupation</b> </td> <td width="35%"> {{occupation}} </td> </tr> </table> </td> </tr> </table> </body> </html>
我嘗試了一天，但它仍然存在
1 個解決方案
解決方案1
2 已采納 2021-07-24 17:58:40
如果我正確解釋了你的目標狀態，這可能會幫助你實現你想要的。
<span style="display: flex; justify-content:center; margin-top:2em"> <h1>Biodata</h1></span> <table style="margin-left: 2em;text-align:left"> <tr> <th>Name</th> <td>{{name}}</td> <td rowspan=5 style="background-color: red;">Image here</td> </tr> <tr> <th>Father's name</th> <td>{{fathersName}}</td> </tr> <tr> <th>Mother's name</th> <td>{{mothersName}}</td> </tr> <tr> <th>Mother's occupation</th> <td>{{mothersOccupation}}</td> </tr> <tr> <th>eMail address</th> <td>{{emailAddress}}</td> </tr> <tr> <th>Date of Birth</th> <td>{{dateOfBirth}}</td> </tr> <tr> <th>Place of Birth</th> <td>{{placeOfBirth}}</td> </tr> <tr> <th>Occupation</th> <td>{{occupation}}</td> </tr> </table>
為什么這些動態插入的HTML元素未正確對齊顯示
[英]Why these dynamically inserted HTML elements aren't display with proper alignment
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.