Question

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

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
}

Answer 1

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

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

或者将其应用于其父元素：

.parent{
   text-align:center;
}

Answer 2

请不要使用<center></center>标记，从HTML5开始，它们已被删除/无效。

你的按钮的父母是什么？

例如，如果你有：

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

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

.container {
    text-align: center;
}

如何在html5中居中按钮？

2 个答案: