如何在html5中居中按钮？

Posted 2023-03-29

【中文标题】如何在html5中居中按钮？

【英文标题】：How do I center a button in html5?

【发布时间】：2014-03-14 23:24:31

【问题描述】：

如何在 html5 中使按钮居中？ 通过修改css文件。 我不想在 html 代码中使用 center 标记。

a.read
padding:10px 20px;
font-size:14px;
line-height:20px;
background-color:#eba73c;
text-align:center;
color:#fff;
border-radius:5px;
text-decoration:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align:center;
display:inline-block;
clear:both

【问题讨论】：

要居中，你给它margin: 0 auto;

谢谢佩德罗，但我已经尝试过了。 jsfiddle.net/AndersN/YT4Uk

【参考方案1】：

您可以将这些样式应用到锚点以使其成为块级，分配宽度，然后像这样调整其边距：

a.read
   display:block;
   width:100px;
   margin:0 auto;

或将其应用于其父元素：

.parent
   text-align:center;

【参考方案2】：

请不要使用<center></center> 标签，它们已被删除/自 HTML5 起无效。

你的按钮的父级是什么？

例如，如果您有：

<div class="container">
   <button class="read">A button</button>
</div>

您可以通过将text-align: center 应用于按钮的父级来将其居中。

.container 
    text-align: center;

【讨论】：

感谢您的帮助。我这样解决了jsfiddle.net/AndersN/LyX3L