无法让两个页面对齐

Question

需要认真检查...

我不明白为什么这两个页面没有对齐（中心）。我将非常感谢您能焕然一新。

• 第1页：https://udhr.audio/UDHR_Video.asp?lng=nde
• 第2页：https://udhr.audio/UDHR_Video.asp?lng=nde&p=Preamble

我已经翻阅了代码，删除了所有错误内容等，但仍然看不出为什么两个页面排列不一样。

第 1 页之后的所有页面都正确排列：

• 第2页：https://udhr.audio/UDHR_Video.asp?lng=nde&p=Preamble
• 第3页：https://udhr.audio/UDHR_Video.asp?lng=nde&p=1
• 第4页：https://udhr.audio/UDHR_Video.asp?lng=nde&p=2
• 等

这是第 1 页的相关代码：

<table style="display:flex; align-items:center; flex-direction:column;">
    <tr>
        <td style="text-align:center;">
            <div id="sharing" style="padding-top:5px; text-align:center; width:500px; padding-left:0px;">
                <a href="http://www.facebook.com/share.php?u=https://udhr.audio/UDHR_Video.asp?lng=nde&title=Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele" target="_blank"><img src="Images/Facebook_Icon.gif" title="Facebook" border="0" style="width:35px;"/></a>&nbsp;
                <a href="http://www.twitter.com/home?status=https://udhr.audio/UDHR_Video.asp?lng=nde+Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele" target="_blank"><img src="Images/Twitter_Icon.gif" title="Twitter" border="0" style="width:35px;"/></a>&nbsp;
                <a href="https://plus.google.com/share?url=https://udhr.audio/UDHR_Video.asp?lng=nde" target="_blank"><img src="Images/Google_Icon.gif" title="Google +" border="0" style="width:35px;"/></a>&nbsp;
                <a href="mailto:?subject=Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele&body=https://udhr.audio/UDHR_Video.asp?lng=nde"><img src="Images/Email_Icon.gif" title="Email" border="0" style="width:35px;"/></a>
            </div>
        </td>
    </tr>
</table>

<table style="display:flex; align-items:center; flex-direction:column;">
    <tr>
        <td style="text-align:center; border:solid 1px black; padding:10px; width:480px;">  
            <div class="w3-content" style="width:100%">

                <div class="w3-animate-opacity" >
                    <img src="Images/img_UDHR_Cover_NDE_400px.jpg" style="bottom-margin:15px;">

                        <audio id="myAudio_Cover" src="Audio/nde/UDHR_Cover_NDE_DS.mp3">
                          Your browser does not support the audio element.
                        </audio>

                    <div class="w3-section">    
                        <img id="Pause" src="images/ControlButtons_Pause_Up.jpg" onclick="document.getElementById('myAudio_Cover').pause(); this.style.display = 'none'; document.getElementById('Play').style.display = 'inline';" onmouseover="this.src = 'images/ControlButtons_Pause_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Pause_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Pause_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Pause_Over.jpg';" style="cursor:pointer; display:none;" title="Pause" />
                        <img id="Play" src="images/ControlButtons_Play_Up.jpg" onclick="document.getElementById('myAudio_Cover').play(); this.style.display = 'none'; document.getElementById('Pause').style.display = 'inline';" onmouseover="this.src = 'images/ControlButtons_Play_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Play_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Play_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Play_Over.jpg';" style="cursor:pointer; display:inline;" title="Play" />
                        <img id="Reload" src="images/ControlButtons_Reload_Up.jpg" onclick="document.getElementById('myAudio_Cover').play(); this.style.display = 'none'; document.getElementById('Pause').style.display = 'inline'; document.getElementById('Play').style.display = 'none';" onmouseover="this.src = 'images/ControlButtons_Reload_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Reload_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Reload_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Reload_Over.jpg';" style="cursor:pointer; display:none;" title="Play" />
                        <img src="images/ControlButtons_Next_Up.jpg" onclick="window.location.href = 'https://udhr.audio/UDHR_Video.asp?lng=nde&p=Preamble'" onmouseover="this.src = 'images/ControlButtons_Next_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Next_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Next_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Next_Over.jpg';" style="cursor:pointer;" title="Next" />
                   </div>

                </div>

            <div class="w3-center" style="width:100%;">
            <form name="SectionChooserForm">
                    <select name="SectionChooser" id="SectionChooser" onChange="goto_URL(this.form.SectionChooser);">
                    </select>
            </form><br />
            <a href="https://udhr.audio" title="Home"><img src="Images/homeicon.gif" border="0" onmouseover="this.src = 'Images/homeicon_over.gif';" onmouseout="this.src = 'Images/homeicon.gif';" /></a>
            </div>
        </td>
    </tr>
</table>

以下是第 3 页的相关代码：

<table style="display:flex; align-items:center; flex-direction:column;">
    <tr>
        <td style="text-align:center;">
            <div id="sharing" style="padding-top:5px; text-align:center; width:510px; padding-left:0px;">
                <a href="http://www.facebook.com/share.php?u=https://udhr.audio/UDHR_Video.asp?lng=nde&title=Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele" target="_blank"><img src="Images/Facebook_Icon.gif" title="Facebook" border="0" style="width:35px;"/></a>&nbsp;
                <a href="http://www.twitter.com/home?status=https://udhr.audio/UDHR_Video.asp?lng=nde+Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele" target="_blank"><img src="Images/Twitter_Icon.gif" title="Twitter" border="0" style="width:35px;"/></a>&nbsp;
                <a href="https://plus.google.com/share?url=https://udhr.audio/UDHR_Video.asp?lng=nde" target="_blank"><img src="Images/Google_Icon.gif" title="Google +" border="0" style="width:35px;"/></a>&nbsp;
                <a href="mailto:?subject=Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele&body=https://udhr.audio/UDHR_Video.asp?lng=nde"><img src="Images/Email_Icon.gif" title="Email" border="0" style="width:35px;"/></a>
            </div>
            <div style="font-family: Arial, Helvetica, sans-serif; width:510px; font-weight:bold; font-size:16px; text-align:center; padding-left:0px; padding-right:0px;">Amalungelo Omuntu Wonke Emhlabeni Wonke Jikelele</div>
        </td>
    </tr>
</table>
<table style="display:flex; align-items:center; flex-direction:column;">
    <tr>
        <td style="text-align:center; border:solid 1px black; padding:10px; width:480px;">  
            <div class="w3-content" style="width:100%">

                <div class="w3-animate-opacity">

                    <div class="Article_Title">
                        Isivumelwano&nbsp;1
                    </div>

                    <img src="Images/img_UDHR_Article_1_400px.jpg" style="bottom-margin:15px;">
                    <audio id="myAudio_1"  src="Audio/nde/UDHR_Article1_NDE_DS.mp3">
                    Your browser does not support the audio element.
                    </audio>

                    <div class="Article_Text">
                    Abantu bonke bazalwa bekhululekile njalo amalungelo abo elingana. Balesipho sokucabanga lonembeza, ngakho kumele baphathane ngomoya otshengisa ubuhlobo.
                    <br /><span style="font-size:12px; font-style:italic;">Read by&nbsp;Duduzile Sibanda</span>

                    </div>

                    <div class="w3-section">
                        <img src="images/ControlButtons_Prev_Up.jpg" onclick="window.location.href = 'https://udhr.audio/UDHR_Video.asp?lng=nde&p=Preamble'"  onmouseover="this.src = 'images/ControlButtons_Prev_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Prev_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Prev_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Prev_Over.jpg';" style="cursor:pointer; margin-right:40px;" title="Previous" />                    
                        <img id="Pause" src="images/ControlButtons_Pause_Up.jpg" onclick="document.getElementById('myAudio_1').pause(); this.style.display = 'none'; document.getElementById('Play').style.display = 'inline';" onmouseover="this.src = 'images/ControlButtons_Pause_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Pause_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Pause_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Pause_Over.jpg';" style="cursor:pointer;" title="Pause" />
                        <img id="Play" src="images/ControlButtons_Play_Up.jpg" onclick="document.getElementById('myAudio_1').play(); this.style.display = 'none'; document.getElementById('Pause').style.display = 'inline';" onmouseover="this.src = 'images/ControlButtons_Play_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Play_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Play_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Play_Over.jpg';" style="cursor:pointer; display:none;" title="Play" />
                        <img id="Reload" src="images/ControlButtons_Reload_Up.jpg" onclick="document.getElementById('myAudio_1').play(); this.style.display = 'none'; document.getElementById('Pause').style.display = 'inline'; document.getElementById('Play').style.display = 'none';" onmouseover="this.src = 'images/ControlButtons_Reload_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Reload_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Reload_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Reload_Over.jpg';" style="cursor:pointer; display:none;" title="Play" />
                        <img src="images/ControlButtons_Next_Up.jpg" onclick="window.location.href = 'https://udhr.audio/UDHR_Video.asp?lng=nde&p=2'" onmouseover="this.src = 'images/ControlButtons_Next_Over.jpg';" onmouseout="this.src = 'images/ControlButtons_Next_Up.jpg';" onmousedown="this.src = 'images/ControlButtons_Next_Down.jpg';" onmouseup="this.src = 'images/ControlButtons_Next_Over.jpg';" style="cursor:pointer; margin-left:40px;" title="Next" />
                    </div>
                </div>
            </div>  

            <div class="w3-center" style="width:100%;">
                <form name="SectionChooserForm">
                        <select name="SectionChooser" id="SectionChooser" onChange="goto_URL(this.form.SectionChooser);">
                        </select>
                </form><br />
                <a href="https://udhr.audio" title="Home"><img src="Images/homeicon.gif" border="0" onmouseover="this.src = 'Images/homeicon_over.gif';" onmouseout="this.src = 'Images/homeicon.gif';" /></a>
            </div>
        </td>
    </tr>
</table>

只是第一个封面不对齐。感谢您的观看！

Answer 1

未对齐的原因一直不清楚，但我通过动态调整第 1 页上 div 容器的填充找到了解决方法。