如何居中HTML按钮？Google Sites嵌入按钮居中求助

你的代码里有两个问题导致按钮无法居中：

1. <input>按钮是行内元素，直接设置margin:0 auto不会生效，行内元素不支持左右自动margin的居中方式
2. 你写的margin-left:0 auto这种写法是错误的，正确的简写是margin: 0 auto（上下边距0，左右自动）

下面给你两种直接可用的修改方案，复制替换原来的代码就行：

方案一：通过包裹链接的<a>标签实现居中 #

<a href='https://www.google.com/url?q=https%3A%2F%2Fwww.dropbox.com%2Fs%2Fexga4eg4czbgk5e%2Fserver.tar%3Fdl%3D1&amp;sa=D&amp;sntz=1&amp;usg=AOvVaw3w-ZKq78fEYypN0HTjEOFp' target='_self' style='display:block;text-align:center;'>
  <input type='button' style='padding-left:17px;padding-top:10px;padding-right:17px;padding-bottom:10px;background-color:#303030;color:#FFFFFF;border:none;border-radius:100px;cursor:pointer' value='Download Files' onMouseOver=this.style.backgroundColor='#1a1a1a';this.style.color='#ffffff';this.style.borderColor='#d5d5d5' onMouseOut=this.style.backgroundColor='#303030';this.style.color='#FFFFFF';this.style.borderColor='#d5d5d5' />
</a>

• 修改点：给<a>标签添加display:block;text-align:center，让链接块占满整行，内部按钮通过文本居中实现对齐；同时把按钮里重复的边框设置简化成border:none，效果不变更简洁。

方案二：直接给按钮设置块级显示并自动margin #

<a href='https://www.google.com/url?q=https%3A%2F%2Fwww.dropbox.com%2Fs%2Fexga4eg4czbgk5e%2Fserver.tar%3Fdl%3D1&amp;sa=D&amp;sntz=1&amp;usg=AOvVaw3w-ZKq78fEYypN0HTjEOFp' target='_self'>
  <input type='button' style='padding-left:17px;padding-top:10px;padding-right:17px;padding-bottom:10px;margin:0 auto;display:block;background-color:#303030;color:#FFFFFF;border:none;border-radius:100px;cursor:pointer' value='Download Files' onMouseOver=this.style.backgroundColor='#1a1a1a';this.style.color='#ffffff';this.style.borderColor='#d5d5d5' onMouseOut=this.style.backgroundColor='#303030';this.style.color='#FFFFFF';this.style.borderColor='#d5d5d5' />
</a>

• 修改点：给按钮添加display:block;margin:0 auto，把按钮转为块级元素，此时左右自动margin会让它在父容器中水平居中。

两种方案都能解决你的问题，选其中一个复制到Google Sites的HTML嵌入模块里即可。

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