Html Can'；不要让两页对齐

需要认真的精神检查

我不明白为什么这两页没有对齐（居中）。如果换个新的形象，我将不胜感激

• 第1页：
• 第2页：

我已经通读了代码，删除了所有错误的内容，等等，但仍然不明白为什么这两个页面排列不一致

第1页之后的所有页面正确对齐：

• 第2页：
• 第3页：
• 第4页：
• 等等

以下是第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>

他是一个很好的人
Isivumelwano 1

---

只是第一页封面不对齐。谢谢你看

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

哪些页面的中心没有对齐？请发布您的代码，以便我们能够提供帮助。请提供有关此问题的更多详细信息。就我而言，这些页面是水平对齐的，这里的确切问题是什么？谢谢你的回复！第1页和第2页看起来是水平居中的，但有点偏离（可能是20像素左右）。我正在录制一个屏幕截图，所以我正在非常详细地查看它。我可以看到封面（P1）稍微在序言（P2）的右边。@Jonny，至于发布代码，我认为最好使用View Source查看生成的内容。如果对你有用的话。否则，我会将其添加到帖子中。@Jonny，我已根据您的请求添加了代码。