I have a student who is trying to center his links. His CSS looks like this for it:
a {
text-align: center;
}
All of the other rules in the stylesheet are working correctly. I can’t figure this one out. Any thoughts?
@edavis
Hi Elizabeth,
The text-align property centers text within the element that it’s applied to. Certain elements, such as the paragraph element and the heading elements, generally take up the entire width of the page, so when the text is centered within the element, it is also centered on the page.
The anchor element (<a>) is usually only as wide as the text it’s being applied to, so when you center text within an anchor element, you won’t see any effect.
There are a few ways to get the effect that you want, but most of them involve code that the students will not see in the course.
With what the kids are learning in this course, what you probably want to do is put the anchor tag inside a paragraph tag, then set the paragraph element’s CSS to text-align:center;.
If you don’t want the style to apply to regular paragraphs, you’ll want to use a class (which they learn later) to specify which paragraphs get centered in that way. The ones with the class will still get all the styles of the regular paragraph, but they’ll also get the styles from the class that you defined just for the links.
You can also use two classes so that you can give specific styles to paragraphs that aren’t links, and specific styles to paragraphs that are links (Example).
Another option is to make links display as a block element (the way that headings and paragraphs are displayed) with the rule display: block (Example). In general, though, you should probably have your links inside another element, and not just hanging out in the body of the page.