对齐容器div中的按钮链接

Question

我创建了一个按钮但是我想将它对齐在一个容器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

<div class="buttoncontainer">
<a href="http://content.workbooks.com/free-trial-workbooks-crm" id="button2" style="text-decoration: none; color: #fff;">start a free trial</a>
</div>

Link to Fiddle

有什么建议吗？

不发布链接作为图片的道歉，我还没有足够的声誉。

Answer 1

从＃button2 margin-top: 20px;

中删除CSS

请参阅fiddle

因此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; */
}

<强>更新

查看更新后的fiddle

我已将css中的填充更改为padding: 14px 32px;。所以它集中在一起。

Answer 2

在button2'样式中：

• 删除margin-top
• 将显示设置为块

然后：

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

小提琴：http://jsfiddle.net/by3pe47d/7/

Answer 3

所以我做的是交换id和类，我将按钮2类添加到html。

我添加了一个位置：亲戚;属于容器，因此内部将留在里面。

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

我还将上边距改为2px而不是20px

http://jsfiddle.net/by3pe47d/10/

HTML -

<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>

的CSS -

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;
}

大型更新

看到被删除的图像并制作出模仿它的图像。即使您使用左，右等属性，它也会保持格式化。

http://jsfiddle.net/by3pe47d/11/