[css] link element wil maar niet centreren.

donderdag 2 juli 2015 22:38

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig met heel basic wat webdesign skills af te borstelen, maar ik kom nu toch iets vreemds tegen.
Ik wil een link element die in een div staat centreren, maar wat ik ook probeer die gruwel blijft maar links uitlijnen.

HTML: index.html

 <!DOCTYPE HTML>
<html>
<head>
     <title>404 |  | Portfolio</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="description" content="Sorry, something went wrong. Page could not be found.">
     <link rel="shortcut icon" href="favicon.png">
     <link href="style/404.css" rel="stylesheet" type="text/css">
</head>
<body>
     <div class="message">
               <h1>Oh no!</h1>
               <p>Apparently, something went wrong. Try again at my home page:</p>   
               <p><a href="">link naar website</a></p>
     </div>
</body>
</html>

Cascading Stylesheet: style.css

body{
     color:              #000000; 
     background:         #f7f8f8;
     font-family:   'Arial';
     
}

.message{
     width:              500px;
     margin-left:   auto;
     margin-right:  auto;
     margin-top:    100px;
}

h1{
     text-align:    center;
     font-weight:   700; 
     color:              #d82c2e;
}

a{
     text-align:    center;
     color:              #c12728;
}

@media only screen and (max-width:768px){.message{width:90%}}

Iemand enig idee hoe ik die link netjes in het midden krijg? Zodra ik er een h1 tag voorzet springt ie direct naar het midden, maarja dat is niet de bedoeling.

Wat zie ik over het hoofd?

[ Voor 3% gewijzigd door MenN op 03-07-2015 19:22 ]

"Any sufficiently advanced technology is indistinguishable from magic" - Arthur C. Clark

donderdag 2 juli 2015 22:41

Acties:

0 Henk 'm!

spone

A is geen class, dus er hoort ook geen punt voor

i5-14600K | 32GB DDR5-6000 | RTX 5070 - MacBook Pro M1 Pro 14" 16/512

donderdag 2 juli 2015 23:21

Acties:

0 Henk 'm!

MenN

Topicstarter

helaas, als ik het puntje weg laat (wat een stomme fout zeg, damn) gaat het linkje alsnog niet centreren, maar blijft nog steeds links staan...

edit: heb het ook even in de start post aangepast. dus voor de gene die het later lezen. oorspronkelijk had ik de a in de css als .a neergezet.

[ Voor 33% gewijzigd door MenN op 02-07-2015 23:22 ]

"Any sufficiently advanced technology is indistinguishable from magic" - Arthur C. Clark

donderdag 2 juli 2015 23:37

Acties:

0 Henk 'm!

n8n

a { display: inline-block; margin: 0 auto; }

Je hebt wat structurele puin maar dit zou moeten werken. a is een inline element, je moet de text-align: center; op de parent zetten (in dit geval de p).

[ Voor 40% gewijzigd door n8n op 02-07-2015 23:39 ]

vrijdag 3 juli 2015 07:58

Acties:

0 Henk 'm!

Gooly

Wie? Ik?

Het A element wordt als inline element weergegeven, waardoor het niet breder is dan zijn inhoud. Dus je kan wel zeggen dat hij zijn inhoud moet centreren, maar als het element niet breder is dan zijn inhoud, dan blijft er weinig over. Zie het als een tafel in het midden van een kamer die precies net zo groot is als die tafel zelf.
Dus je tafel staat misschien wel in het midden, maar de hele kamer staat naar links

De tip van n8n ondervangt dat verschijnsel.

See that's the trouble with reality, it's taken far too seriously.

vrijdag 3 juli 2015 10:44

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

n8n schreef op donderdag 02 juli 2015 @ 23:37:
a { display: inline-block; margin: 0 auto; }

Dit is IMO niet de goeie oplossing en volgens mij werkt hij ook niet zomaar omdat je alsnog een inline element hebt. In je tweede alinea zeg je wat wél de oplossing is.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 3 juli 2015 10:59

Acties:

0 Henk 'm!

MenN

Topicstarter

Thx voor de input allemaal! Inderdaad deze oplossing werkt niet.

n8n schreef op donderdag 02 juli 2015 @ 23:37:
a { display: inline-block; margin: 0 auto; }

Maar met de opmaak op de p elementen staat alles nu waar ik het wil hebben.

Dan nog even @n8n:
'Structurele puin', mooi wil hier kan ik wat van leren

Wat is niet in orde met de structuur zoal ik die nu heb opgezet?

"Any sufficiently advanced technology is indistinguishable from magic" - Arthur C. Clark

vrijdag 3 juli 2015 11:03

Acties:

0 Henk 'm!

mark0172

Deze oplossing werkt bij mij:

a {
text-align: center;
color: #C12728;
display: block;
}

vrijdag 3 juli 2015 11:30

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

mark0172 schreef op vrijdag 03 juli 2015 @ 11:03:
Deze oplossing werkt bij mij:

a {
text-align: center;
color: #C12728;
display: block;
}

Ja, dat werkt, maar aan iemand die duidelijk niet veel ervaring met CSS heeft het advies geven om al zijn linkjes een display: block te geven lijkt me niet bepaald handig.

De oplossing is hierboven al gegeven. Centreer de parent, niet de anchor.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 3 juli 2015 11:33

Acties:

0 Henk 'm!

Shineless

NMe schreef op vrijdag 03 juli 2015 @ 11:30:
[...]

Ja, dat werkt, maar aan iemand die duidelijk niet veel ervaring met CSS heeft het advies geven om al zijn linkjes een display: block te geven lijkt me niet bepaald handig.

De oplossing is hierboven al gegeven. Centreer de paragraaf, niet de anchor.

Aangezien hij de gehele message wilt centreren, waarom niet gewoon een text-align: center; zetten op de "message" class?

During the day I'm tired, because I'm a super hero at night.

vrijdag 3 juli 2015 11:43

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Klopt.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 3 juli 2015 11:45

Acties:

0 Henk 'm!

MenN

Topicstarter

Heb de tip van Shineless opgevolgd. En dat werkt prima. Thx heren, probleem opgelost

"Any sufficiently advanced technology is indistinguishable from magic" - Arthur C. Clark

vrijdag 3 juli 2015 11:51

Acties:

0 Henk 'm!

torp

Vergeet niet de overbodige text-aligns en margins weg te halen.

vrijdag 3 juli 2015 20:51

Acties:

0 Henk 'm!

Gooly

Wie? Ik?

mark0172 schreef op vrijdag 03 juli 2015 @ 11:03:
Deze oplossing werkt bij mij:

a {
text-align: center;
color: #C12728;
display: block;
}

Klopt, werkt. Maar daarmee krijg je wel een klikbare link over de hele breedte van de div

See that's the trouble with reality, it's taken far too seriously.

Onderwerpen