html - 背景を全幅にせずに、背景を中心にリンクしますか?

Question

私のリンクには背景色があります。中央に配置する必要がありますが、背景が幅いっぱいにならないようにします。テキストはCMSによって提供され、変化するため、リンクの固定幅を設定することもできません。これは HTML を追加しないと解決できませんか?

http://jsfiddle.net/jx3e4/2/

<a class="green-button" href="#">Download</a>

<a class="green-button two" href="#">Download</a>

.green-button {
    background: none repeat scroll 0 0 blue;
    border-bottom: 1px solid red;
    color: #FFFFFF;
}

.two {
    margin: auto;
    display: block;
}

編集 - 申し訳ありませんが、言及しませんでしたが、同じ親 div 内に、デフォルトのテキストを左揃えにする必要があるテキストもあります。

http://jsfiddle.net/jx3e4/7/

Answer 1

親の divtext-align:centerと緑色のボタンを指定します -display:inline-block

更新されたフィドル

Answer 2

これを試して..........

HTML

<div class="links">
<a class="green-button" href="#">Download</a>
    <br />
    <br />
<a class="green-button two" href="#">Download</a>
</div>

CSS

.green-button {
    background: none repeat 0 0 blue;
    border-bottom: 1px solid red;
    color: #FFFFFF;
    text-align:center;
    margin:auto;
    padding: 6px 12px 6px 12px;
}
.links {
    width:100%;
    display:block;
    text-align:center;
}

jsFiddle