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

【问题标题】：HTML - Set proper alignment of image and text in html tableHTML - 在 html 表格中设置图像和文本的正确对齐方式
【发布时间】：2021-10-01 08:16:29
【问题描述】：

我尝试在 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>

试了一天还是不行

【问题讨论】：

你希望它最终如何对齐？您是否有意使用嵌套表？
我想要列文本垂直对齐正确和右侧图像@Tom

标签： javascript html css reactjs jspdf

【解决方案1】：

如果我正确地解释了你的目标状态，这可能会帮助你实现你想要的。

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

【讨论】：