如何使页脚居中[重复]

Posted 2023-03-21

【中文标题】如何使页脚居中[重复]

【英文标题】：How to center a footer [duplicate]

【发布时间】：2021-10-20 02:41:39

【问题描述】：

谁能帮我把这个特定的页脚居中：

<table cellspacing="0" cellpadding="0" border="0" align="center" 
    bgcolor="#ffffff"  class="email-container">
  <table align="center"  class="email-container">
    <footer text-align="center">
      <p class="style2">
        <br />
        Klik <a href="^OptOut:ProjectLink^">her</a>, hvis du ikke 
        ønsker at modtage flere invitationer til undersøgelsen.&nbsp;
      </p>
      <p class="style2">
        XX afdækker hvert år kundernes oplevelser i en række 
        forskellige brancher. <a href="^OptOut:PanelLink^">Klik 
        her</a>, hvis du ønsker at afmelde alle invitationer til XXs 
        undersøgelser fremover.
      </p>
      <p class="style2">
        XX gennemfører XX. Ved at påbegynde din besvarelse accepterer 
        du, at vi må indsamle og behandle dine data i henhold til 
        <a href="https://survey.euro.confirmit.com/isa/POADCB/AutoIndex/autoindex_dk_samtykke_confirmit.html"              
          target="_blank" rel="noopener">dette samtykke</a>. 
          Det er frivilligt at deltage i undersøgelsen.
        </p>
      <p class="style2"> </p>
    </footer>
  </table>
</table>

提前致谢！

【问题讨论】：

您能否将 CSS 代码的（一些相关部分）添加到您的代码 sn-p 中？通过这种方式，我们可以提供适合您情况的 CSS 解决方案。

你能再具体一点吗？

什么是'style2'？您在表内的表内有一个页脚。 HTML 无效。先解决这个问题。

【参考方案1】：

您忘记了<footer> 标签上的style 属性

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff"  class="email-container">
  <table align="center"  class="email-container">
    <footer style="text-align:center; display:flex;
    flex-direction:column; justify-content:center;"
            ><p class="style2"><br />Klik <a href="^OptOut:ProjectLink^">her</a>, hvis du ikke ønsker at modtage flere invitationer til undersøgelsen.&nbsp;</p>
      <p class="style2">XX afdækker hvert år kundernes oplevelser i en række forskellige brancher. <a href="^OptOut:PanelLink^">Klik her</a>, hvis du ønsker at afmelde alle invitationer til XXs undersøgelser fremover.</p>
<p class="style2">XX gennemfører XX. Ved at påbegynde din besvarelse accepterer du, at vi må indsamle og behandle dine data i henhold til <a href="https://survey.euro.confirmit.com/isa/POADNDJYMRIOOXCAEPPIMTPDIIFRGQCB/AutoIndex/autoindex_dk_samtykke_confirmit.html" target="_blank" rel="noopener">dette samtykke</a>. Det er frivilligt at deltage i undersøgelsen.</p>
        <p class="style2"> </p>
    </footer>
  </table>
</table>

【参考方案2】：

你可以这样做。

footertext-align:center;

<table cellspacing="0" cellpadding="0" border="0" align="center" 
    bgcolor="#ffffff"  class="email-container">
  <table align="center"  class="email-container">
    <footer>
      <p class="style2">
        <br />
        Klik <a href="^OptOut:ProjectLink^">her</a>, hvis du ikke 
        ønsker at modtage flere invitationer til undersøgelsen.&nbsp;
      </p>
      <p class="style2">
        XX afdækker hvert år kundernes oplevelser i en række 
        forskellige brancher. <a href="^OptOut:PanelLink^">Klik 
        her</a>, hvis du ønsker at afmelde alle invitationer til XXs 
        undersøgelser fremover.
      </p>
      <p class="style2">
        XX gennemfører XX. Ved at påbegynde din besvarelse accepterer 
        du, at vi må indsamle og behandle dine data i henhold til 
        <a href="https://survey.euro.confirmit.com/isa/POADCB/AutoIndex/autoindex_dk_samtykke_confirmit.html"              
          target="_blank" rel="noopener">dette samtykke</a>. 
          Det er frivilligt at deltage i undersøgelsen.
        </p>
      <p class="style2"> </p>
    </footer>
  </table>
</table>

【参考方案3】：

<link rel="stylesheet" href="a.css">

 
    <footer text-align="center" 
            ><p class="style2"><br />Klik <a href="^OptOut:ProjectLink^">her</a>, hvis du ikke ønsker at modtage flere invitationer til undersøgelsen.&nbsp;</p>
      <p class="style2">XX afdækker hvert år kundernes oplevelser i en række forskellige brancher. <a href="^OptOut:PanelLink^">Klik her</a>, hvis du ønsker at afmelde alle invitationer til XXs undersøgelser fremover.</p>
    <p class="style2">XX gennemfører XX. Ved at påbegynde din besvarelse accepterer du, at vi må indsamle og behandle dine data i henhold til <a href="https://survey.euro.confirmit.com/isa/POADNDJYMRIOOXCAEPPIMTPDIIFRGQCB/AutoIndex/autoindex_dk_samtykke_confirmit.html" target="_blank" rel="noopener">dette samtykke</a>. Det er frivilligt at deltage i undersøgelsen.</p>
        <p class="style2"> </p>
    </footer>


css...
footer 
    text-align: center;
    padding: 3px;
    /* background-color: DarkSalmon;
    color: white; */
    
  

【讨论】：

也许这会有所帮助，可以在 css 文件中编辑 bg-color 和 text-color