HTML - 在 html 表中设置图像和文本的正确对齐方式

Question

I tried to set the alignment of image and text in HTML table and generate pdf using jsPDF but I was unable to set proper image alignment along with text, your help saves my day我尝试在 HTML 表中设置图像和文本的对齐方式并使用 jsPDF 生成 pdf 但我无法设置正确的图像对齐方式和文本，您的帮助挽救了我的一天

[![enter image description here][1]][1] [![在此处输入图像描述][1]][1]

Here is my code, your help is most appreciated这是我的代码，非常感谢您的帮助

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

I tried for a day but it still persists我尝试了一天，但它仍然存在

Answer 1

If I interpreted your target state correctly, this might be helping you to achieve what you want.如果我正确解释了你的目标状态，这可能会帮助你实现你想要的。

 <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 - 在 html 表中设置图像和文本的正确对齐方式

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-07-24 17:58:40

HTML - 在 html 表中设置图像和文本的正确对齐方式

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-07-24 17:58:40

解决方案1
2 已采纳 2021-07-24 17:58:40