CODEWITHSUNDEEP
css
silow
silow

Reputation: 4306

How can I center an anchor link?

I have a link labeled Get D1 which I need to center in the middle of the page. I tried text-align:center, but that works on the text itself and doesn't actually center the link in the middle of the page. Does anyone know the css trick for this?

<div id="allds">
    <div id="d1">
        <a href="http://someurl.com" id="d1link">Get D1</a>
    </div>
    <div id="d2">
        content of d2
    </div>
</div>

Upvotes: 22

Views: 79978

Answers (4)

Brandon Durham
Brandon Durham

Reputation: 7727

Here ya go: 

#link-container {
    text-align: center;
}
#link {
    background: black;
    color: white;
    display: inline-block;
    padding: 10px;
}

<div id="link-container">
    <a href="#" id="link">This is my link!</a>
</div>

That what you need?

Upvotes: 12

Mark Steggles
Mark Steggles

Reputation: 5573

As simple as:

#d1link {display:block;text-align:center}

text-align:center doesn't work on inline elements. An anchor is an inline element by default.

Upvotes: 36

stoeffel
stoeffel

Reputation: 238

you can set margin-left of d1 to 50%... but allds must have a spec width

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186752

#d1 { width:whatever; margin:0 auto; }

If you don't want to specify a width, you need to use an alternate technique.

Upvotes: 10

Related Questions