So zentrieren Sie ein Anker-Tag-Element vertikal und horizontal ohne div?

Also, wie man eine Anker-Tag-Verbindung vertikal und horizontal zentriert? Kein div oder irgendwelche Elternelemente verwendet. ich möchte es nur wie in der folgenden Abbildung zentrieren. This is how i want it to look like.So zentrieren Sie ein Anker-Tag-Element vertikal und horizontal ohne div?

Und dies ist mein Code:

<html> 
<head> 
<style type="text/css"> 
body{ 
background:#000; 
} 
.link{ 
font-size:40px; 
} 
</style> 
</head> 
<body> 
<center><a class="link" href="#">BornExplorer</a></center> 
</body> 
</html>

Quelle

2016-05-05 Born Explorer

Sie werden eher eine Antwort zu erhalten, und hilfreiche Informationen, wenn Sie Ihren Code enthalten, der nicht funktioniert, oder nähert sich, dass Sie versucht haben, aber gescheitert. – AeroBuffalo

@AeroBuffalo tut mir leid. Jetzt ist es enthalten. –

Wenn Sie vorhaben, für eine volle Seite Setup mit aa Single-Link Sie die Setup-Zentrierung könnten line-height:100vh verwendet, die, dass die Leitungsmittel Die Höhe beträgt 100% der Seitenhöhe.

html,body{width:100%;height:100%;margin:0;} 
 
body{ 
 
    background:#000; 
 
    line-height:100vh; 
 
} 
 
.link{ 
 
    font-size:40px; 
 
    line-height:1; 
 
    display:inline-block; 
 
}

<center><a class="link" href="#">BornExplorer</a></center>

Quelle

2016-05-05 18:23:42

Danke für Ihre Hilfe! :) –

Wenn die Breite und Höhe der Anker-Tag-Box befestigt sind, ist es ziemlich trivial. Vorausgesetzt, dass Sie den Tag in Bezug auf das Bildfenster positionieren wollen:

html { background: black; color: white; } 
 
.centered { 
 
    /* size */ 
 
    width: 10em; 
 
    height: 1em; 
 
    
 
    /* positioning */ 
 
    margin-left: -5em; /* -(width/2) */ 
 
    margin-top: -0.5em; /* -(height/2) */ 
 
    position: fixed; /* relative to viewport */ 
 
    left: 50%; 
 
    top: 50%; 
 
    
 
    /* just aesthetic styling */ 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
    background: rgba(255,255,255,0.3); 
 
}

<a class="centered" href="#">Centered</a>

Quelle

2016-05-05 18:20:09

Cool! Vielen Dank für die Hilfe. :) –

So zentrieren Sie ein Anker-Tag-Element vertikal und horizontal ohne div?

Antwort

Verwandte Themen