CSS does not align my classes

Yo, I wanted to align my classes to the center of the page, but CSS wont let me: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> <meta charset="utf-8"> <title>Website</title> </head> <body> <header> <a class="twitch" href="http://twitch.tv/fate_twisted_na" target="_blank"> Twitch </a> <a class="google" href="http://www.google.com" target="_blank"> google</a> <a class="youtube" href="http://www.youtube.com/feed/subscriptions" target="_blank"> YouTube </a> <p>This paragraph is aligned to the center</p> </header> </body> </html> .twitch { color: blue; font-family: monospace; font-size: 35px; text-align: center; text-decoration: none; text-decoration-color: red; } .youtube { color: blue; font-family: monospace; font-size: 35px; text-align: center; text-decoration: none; text-decoration-color: red; } .google { color: blue; font-family: monospace; text-align: center; font-size: 35px; text-decoration: none; text-decoration-color: red; } body { background-color: #97B4CB; } p { text-align: center; } Can anyone help me ? Did I make a mistake?

html css

10th Feb 2017, 6:44 AM

Simon

3 Réponses

+ 4

first of all: your classes are all the same, so you just need one. a is an inline element, so you can't use text-align on it. either wrap it in div, span or p or make it a block element. then there's a semicolon in your definition for p where there should be a colon. hope that gives you a clue

9th Feb 2017, 8:11 PM

Mario L.

+ 2

You have wrote 'text-align; center;'... It's not easy to see, but you put a semi-colon instead a colon ( double vertical dots ) between property name and value ^^

9th Feb 2017, 8:11 PM

visph

+ 1

Well: it's not cool to not explicitly answer :P Do you have resolved your problem? Your <p> is now centered as you wanted. But maybe are you waiting for more? You're lucky: I was passing here, and I saw that you've silently edited your question ^^ Change your <p> rulesn for a <header> one: header { text-align:center; } ... it may be what you are waiting ;) [ edit ] and delete rules about 'text-align' inside your <a> rules: as previously said by @Mario Laurisch, their content can't be text-aligned ( but they can be inside their container ) as they are inlined elements ( container must be block element to handle text-alignement of its content...

10th Feb 2017, 9:19 AM

visph