CODEWITHSUNDEEP
htmlcsstextalignmentcenter
Isaiah Young
Isaiah Young

Reputation: 51

How to center a link using CSS

I am very new and was messing around with some code ( just HTML and CSS ) But I can't get my link to center like my text? The id's are just for practice I know They aren't required.

http://pastebin.com/kYyR6WUx

Upvotes: 4

Views: 41323

Answers (4)

Ed 42
Ed 42

Reputation: 1

This is how it worked for me:

<div style="text-align:center"><a href="https://stackoverflow.com/"></a></div>

Upvotes: 0

user3245800
user3245800

Reputation:

Link is an inline element. Bootstrap uses center-block to change inline element display:

.center-block {
  display: block;
  margin-right:auto;
  margin-left:auto;
}

Yet this doesn't work when applied directly to link, such as:

<a href="#" class="center-block">link</a>

It only works if I apply width style. 20% works well in my page. This is approximate centering. I've tried text-center many times with links and have never been able to make it work. What surprises me is that using display: block alone doesn't work with margin centering. Width has to be added.

Upvotes: 0

sun
sun

Reputation: 1678

In your Case 

 #W3link
    {
    width:100px; /*use your preferred width*/
    margin-left:auto;
    margin-right:auto;
    }

Use Class if you want to use more than one time.

Upvotes: 0

seanxiaoxiao
seanxiaoxiao

Reputation: 1302

I provided a solution with css. You could take a look at this link http://jsfiddle.net/qPAfK/

div {
    width: 100px;
}

div a {
    text-align: center;
    display: block;
    margin: 0 auto;
}

Upvotes: 9

Related Questions