Html 在容器div内对齐按钮链接

我已经创建了一个按钮，但我想在容器div中对齐它，使其看起来像：

我的代码是：

body {
    background-color: black;

}

.buttoncontainer {
     background-color: white;
    border-radius: 5px;
    padding: 5px 5px 5px 5px;
    width: 285px;
    height: 55px;
}

#button2:hover {
            background-color: #feb73b;
}

#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
  margin-top: 20px;
}

HTML

有什么建议吗

很抱歉没有将链接作为图片发布，我还没有足够的声誉

去除边缘顶部：20px；从你的按钮

见

因此，CSS应该是这样的

#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
  /* margin-top: 20px; */
}

更新

请参阅更新的

我已将css中的填充更改为padding:14px 32px；。这样它就居中了。

按钮式：

删除页边空白顶部 将显示设置为块 然后：

width:100%;
height:100%;
box-sizing: border-box;

---

Fiddle:

所以我做的是交换id和类，并将button 2类添加到html中

我加了一个位置：相对；属性设置为容器，以便内部保持在内部

此外，如果你想改变它的位置，如左，右等，你可以

我还将顶部边缘改为2px，而不是20px

Html-

大更新

看到了被移除的图像，并制作了一个模仿它的东西。即使使用left、right等属性，它也将保持格式化

---

谢谢我复制并粘贴了按钮，所以一定错过了！你知道怎么把橙色按钮放在中间吗@威尔纳，福格。我通常是引导式的，今天到此为止。我不知道什么是引导式的，但我知道我喜欢它的声音！哈哈！学习如何正确使用它，你将为自己节省大量的压力。谢谢@Lal-我如何将橙色CTA贴子居中无边距？图例-我刚刚更新了你的小提琴，改变了高度和宽度，使它看起来更漂亮。哦，太好了..你也可以和我分享小提琴吗..如果对你有帮助，请投上一票..全部通过。不知道为什么我的问题被否决了！？小提琴：

width:100%;
height:100%;
box-sizing: border-box;

<div id="buttoncontainer">
<div class="button2">
<a href="http://content.workbooks.com/free-trial-workbooks-crm?utm_source=homepage&amp;utm_medium=newfreetrialbutton&amp;utm_campaign=neworangebutton" id="button2" style="text-decoration: none; color: #fff;">start a free trial</a>
</div>
</div>

body {
background-color: black;

}
#buttoncontainer {
position: relative;
 background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}

.button2 {    
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 2px;
}

.button2:hover {
        background-color: #feb73b;
}