html - 如何使用 CSS 使按钮居中？

Question

这是我的 fiddle供引用。

这是用于创建换行符并使“比较”按钮居中的 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 的 class ="center" 添加到 a 元素，将使a 元素内部的内容，而不是元素本身。如果你想让整个 a 元素居中，你应该用另一个标签封装元素，并将该标签的内容居中，例如:

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

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

希望对您有所帮助!