CODEWITHSUNDEEP
htmlcssalignment
Tara Briscoe
Tara Briscoe

Reputation: 69

Center-aligning a link

In the Category page, I need to center align the link to "Continue reading...". I've tried several methods and none of them are working.

This is the HTML on the page:

<a class="more-link">Continue reading <span class="screen-reader-text">description</span> <span class="meta-nav">→</span></a>

I've tried the following CSS codes and none of them work:

.more-link {
  margin-right: auto;
  margin-left: auto;
}

.more-link {
    display: block;
    margin: 0 auto;
}

.more-link {
    text-align: center;
}

What is the proper CSS code to center-align the link?

Upvotes: 0

Views: 67

Answers (2)

Burrito
Burrito

Reputation: 1624

Wrap the link in a div and apply text-align: center to the div, or set the div's align attribute to "center".

Samples:
Link 1
Link 2

Upvotes: 1

Johannes
Johannes

Reputation: 67748

Directly after "Continue reading", there is a [/span] missing. This might already help.

However, that's a <span> tag, which is an "inline element", meaning it will go with the regular text flow.

If you want to center something, first of all it has to be in a block-element, like a <div>tag. With your setting display: block; you did turn it into a block element, but still this could be problematic, since the whole thing is probably inside another inline-element, like <p>. So to be able to center it, the least you have to do is to put it in a separate block element (p or div), independent from any other text.

Upvotes: 0

Related Questions