如何让Reason标签与Textarea靠近并垂直居中且避免偏移

我来帮你搞定这个垂直对齐的问题！首先我注意到你的HTML结构里有个小问题——嵌套的<table>没有被放在父表格的<tr><td>里面，这会导致布局错乱，也是偏移的原因之一。另外默认的表格单元格垂直对齐不是居中，再加上外层表格的padding，就会出现你遇到的情况。

以下是修改后的完整代码，我会一步步说明调整点：

第一步：修复HTML结构 #

把嵌套的<table>放到父表格的一个<tr><td>里，确保结构合法：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <title>Absent Form</title>
</head>
<body>
    <form>
        <table style="border: 1px solid black;">
            <tr>
                <td class="move-left heading"> Royal University of Phnom Penh <br> Department of Information Technology </td>
                <td class="move-right heading"> Kingdom of Cambodia <br> Nation &nbsp; &nbsp; Religion &nbsp; &nbsp; King </td>
            </tr>
            <tr>
                <td>
                    <br> <br> <br>
                    <h1 id="title1">Absent Form</h1>
                    <br>
                </td>
            </tr>
            <tr>
                <td>My name is <input type="text" name="txt_name"/>. I am a <select>
                    <option value="freshmen">Freshmen</option>
                    <option value="sophomore">Sophomore</option>
                    <option value="junior">Junior</option>
                    <option value="senior">Senior</option>
                </select> from class <input type="text" name="txt_class" maxlength="2" size="3"> of the Department of Information Technology of the Royal University of Phnom Penh.
                    <br> <br>
                </td>
            </tr>
            <tr>
                <td style="font-family: Georgia;font-size: 20px; font-weight: 600; text-align: center;"> Greetings, <br> Dean of the Department of Information Technology <br> <br> </td>
            </tr>
            <tr>
                <td><label for="objective" style="text-decoration: underline; text-decoration-style: double;">Objective:</label> An absent request for <input type="text" name="txt_num_day" maxlength="2" size="2"> day(s). <input type="radio" name="first_session" value="first"> First Session <input type="radio" name="first_session" value="second"> Second Session. </td>
            </tr>
            <tr>
                <td><label for="from">From: </label>Date <input type="text" name="txt_fdate" maxlength="2" size="2"> Month <input type="text" name="txt_fmonth" maxlength="2" size="2"> Year <input type="text" name="txt_fyear" maxlength="4" size="4"> </td>
            </tr>
            <tr>
                <td ><label for="to">To: &nbsp; &nbsp;</label>Date <input type="text" name="txt_tdate" maxlength="2" size="2"> Month <input type="text" name="txt_tmonth" maxlength="2" size="2"> Year <input type="text" name="txt_tyear" maxlength="4" size="4"> </td>
            </tr>
            <!-- 把嵌套表格放到父表格的tr和td里 -->
            <tr>
                <td>
                    <table class="reason-table">
                        <tr>
                            <td class="reason-label">
                                <label for="reason" style="text-decoration: underline; text-decoration-style: double;">Reason: </label>
                            </td>
                            <td>
                                <textarea name="reason" rows="10" cols="50" placeholder="Tell us why you are absent."></textarea>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <p>Due to reason mentioned above, I sincerely apology for this inconvenience. I hope you would understand and grant me the permission.</p>
                </td>
            </tr>
            <tr>
                <td class="move-right">Phnom Penh, Date <input type="text" name="txt_sdate" maxlength="2" size="2"> Month <input type="text" name="txt_smonth" maxlength="2" size="2"> Year <input type="text" name="txt_syear" maxlength="4" size="4"> <br> Name and Signature, <br> <br> <br> <br> Name: <input type="text" name="txt_name1" size="40"> </td>
            </tr>
            <tr>
                <td class="move-left"> &nbsp;Approved: &nbsp;Date <input type="text" name="txt_adate" maxlength="2" size="2"> Month <input type="text" name="txt_amonth" maxlength="2" size="2"> Year <input type="text" name="txt_ayear" maxlength="4" size="4"> <br> <br> </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="txt_submit" value="Submit"> <br> <br>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

第二步：调整CSS实现垂直居中并拉近间距 #

修改你的CSS，添加针对Reason表格的样式，确保垂直居中，同时调整间距让标签和textarea靠得更近：

body{
    font-size: 17px;
    text-align: center;
}
table{
    margin-left: auto;
    margin-right: auto;
    padding: 50px;
}
.heading{
    font-size: 20px;
    font-family: Georgia;
}
.move-right{
    float: right;
}
.move-left{
    float: left;
}
label{
    font-weight: 600;
}
#title1{
    font-family: Georgia;
    font-size: 30px;
    text-decoration: underline;
}
input[type=submit]{
    font-size: 20px;
    float: right;
    margin-right: 100px;
}

/* 新增的Reason表格样式 */
.reason-table{
    padding: 0; /* 去掉嵌套表格的默认padding */
    border-collapse: collapse; /* 合并单元格边框，让间距更小 */
}
.reason-table td{
    vertical-align: middle; /* 设置单元格垂直居中 */
    padding: 0 10px 0 0; /* 给标签单元格右边加一点间距，避免和textarea贴太近 */
}
.reason-label{
    white-space: nowrap; /* 防止Reason标签换行 */
}

关键调整说明 #

• 修复HTML结构：把嵌套表格放到父表格的<tr><td>中，避免布局错乱，这是解决偏移的基础。
• 垂直居中设置：给嵌套表格的单元格添加vertical-align: middle，确保标签和textarea在同一水平中线。
• 间距调整：去掉嵌套表格的padding，给标签单元格设置合适的右边padding，让标签和textarea既靠近又不会重叠。
• 防止标签换行：给标签单元格添加white-space: nowrap，确保"Reason: "始终在一行，保持对齐效果。

这样修改后，Reason标签就会和textarea垂直居中对齐，而且两者的间距也会符合你的需求啦！

内容的提问来源于stack exchange，提问作者borak