如何使用 CSS 使按钮居中

Question

这是我的小提琴供参考。

这是用于创建换行符并将"比较"按钮居中的html标记

<p><center><a class="awesome medium orange" href='#'>Compare</a></center></p><center><span style="font-size: xx-small;">Sold by someone</span>

你更喜欢使用 css 而不是标签吗？我应该添加两个额外的类，如 .center.awesome 和 .linebreak.awesome 来完成这项工作吗？

我试过类似的东西

.center.awesome{
    text-align:center;
    margin: 0px auto 0px auto;
}

但它不起作用。

CSS参考：

.awesome{
background: #222 url() repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25); 
position: relative;
cursor: pointer;
}
.medium.awesome {
font-size: 13px;
    }
.orange.awesome {
background-color: #ff5c00;
}

Answer 1

之所以要使用CSS而不是HTML标签进行样式设置，来自各种编程的一个非常重要的原则：关注点分离。您希望纯粹将HTML用于网页中的结构对象，然后您可以纯粹使用CSS设置样式和放置这些对象。这样做的原因是，随着项目的发展，跟踪小的"类似CSS的修复"（内联CSS或中心标签），它们的位置以及做什么，对于开发人员来说，可能会变得非常困难和沮丧。因此，尝试将所有样式代码保留在外部 CSS 文档中，将所有 Javascript 函数声明保留在另一个外部文档中，并在其他文档中尽可能保留纯 HTML。您可能看不到小项目的意义，但这种做法对于不仅仅是琐碎的项目来说是一个真正的救星。

更新：

至于你的另一个问题：为什么会

<center><a...></a></center>

将按钮居中，同时

<a class="center">...</a>

不会？

这是因为将带有 text-align：center 的类 ="center" 添加到 a 元素中，将使内容在 a 元素内居中，而不是元素本身。如果你想让整个 a 元素居中，你应该用另一个标签封装元素，并将该标签的内容居中，例如：

<div class="center">
    <a ...>Buttontext</a>
</div>

这将使内容在 div 元素内居中。如果 div 元素具有全宽，这会将 a 链接居中在中间。

希望对您有所帮助！