少しダイヤルを戻して、フレームワークや使用しているものから離れることをお勧めします。物事を水平方向に中央揃えするには、2 つの方法があります。
ボタンを配置するかどうかに基づいて決定する必要があります:インライン、インラインブロック、またはブロック。モバイルと指とそのすべて(2014)については、インラインブロックまたはブロックをお勧めします。そう -
インライン ブロックの場合は、テキストのように扱うことができます。親をに設定しますtext-align center;
ブロックの場合は使用できますmargin-right: auto; margin-left: auto;が、それには他の問題があります。他のすべての人が考えているように、それらが互いに浮かんですべてを台無しにしないように、適切に整理する必要があります。次のようにすることをお勧めします：jsfiddle
PS - フィドルにそれほど多くのコードを表示する必要はありません。必要最低限のものだけで問題を解決する方が簡単です。幸運を。
HTML
<aside class="service">
<header>
<h2 class="">Title of module thing</h2>
</header>
<div class="text-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p>
<a href="#" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div> <!-- .text-wrapper -->
</aside> <!-- .service -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} /* start your projext off right */
.service {
border: 1px solid #2ecc71;
font-family: helvetica;
text-align: center;
}
.service header {
background-color: #2ecc71;
}
.service header h2 {
font-size: 1.3em;
font-weight: 400;
color: white;
/* text-align: center; */ /* the parent should have this - not the element */
/* width: 100%; */ /* this is already default because it is a block element */
margin: 0;
padding: .5em;
}
.service .text-wrapper {
padding: 1em;
}
.service p {
text-align: left;
font-size: .9em;
}
.button {
display: inline-block; /*so it's like... "inline" - and can be centered */
background-color: #2ecc71;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 1em 2em;
-webkit-border-radius: 5px;
border-radius: 5px;
}