0

My link has a background color. I need it to be centred but for its background to not take up the full width. I also cant set a fixed width for the link, as the text is provided by a CMS and will var. Cant this be solved without adding additional 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;
}

EDIT - Sorry, I didnt mention, but there is also text within the same parent div that needs to keep its default text align of left.

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

4

2 回答 2

0

给父 divtext-align:center和绿色按钮 -display:inline-block

更新的小提琴

于 2013-09-08T11:38:15.530 回答
0

尝试这个..........

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

于 2013-09-08T11:40:03.340 回答