Ein Problem mit dem Headertext und seine Ausrichtung

Wenn ich meine Website in einem Browser ausführen, sollte die Kopfzeile (einige Header) am oberen Rand der Webseite zentriert sein, aber seine Mitte in der Mitte der Webseite. Ich brauche Hilfe, um dies zu beheben, aber ich halte den Header immer noch in einer festen Position.Ein Problem mit dem Headertext und seine Ausrichtung

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Some Title</title> 
 
    <link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%"> 
 
</head> 
 
<style> 
 
    body { 
 
     margin: 0; 
 
     background-image: url("Road.png"); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 

 
    } 
 
    .header { 
 
     position: fixed; 
 
     width: 100%; 
 
     height:70px; 
 
     background-color: transparent; 
 
     text-align:right; 
 
    } 
 
    .socialmedia { 
 
     position:fixed; 
 
     right:150px; 
 
     top:35px; 
 
     transform:translate(0,-50%); 
 
     display: flex; /* add this */ 
 
     align-items: center; /* add this */ 
 
    } 
 

 
    .footer { 
 
     display: flex; 
 
     align-items: center; 
 
     width: 100%; 
 
     height: 90px; 
 
     margin-top: 319px; 
 
    } 
 
</style> 
 

 
<body> 
 
<div class="Coming Soon" style=" color: black;"> 
 
    <div class="header"> 
 
    <a href="website"><h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1></a> 
 

 
    <style> 
 
     a{text-decoration: none; 
 
      color: white; } 
 
    </style> 
 
    <div class="socialmedia"> 
 
     <img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px"> 
 
     <a class="Facebook"> 
 
      <a href="https://www.facebook.com" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a> 
 
     </a> 
 
     <a class="Instagram"> 
 
      <a href="https://www.instagram.com" target="_blank"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a> 
 
     </a> 
 
     <a class="Youtube"> 
 
      <a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
    <p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p> 
 
    <div class="footer" style=" color: black;"> 
 

 
     <p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company | City State Website All Right Reserved.</p> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

Quelle

2017-03-08 Noah Tanenholtz

add 'top: 0;' auf '.header' –

Danke, dass es behoben haben! –

@NoahTanenholtz vielleicht, aber es ist mit absoluter Positionierung und es ist nicht empfohlen, Praxis –

html5 eine native-Tag hat header, Sie brauchen es nicht als eine Klasse zu definieren, aber das ist beiseite ein.

Wenn Sie Ihre Position zu relativ ändern (empfohlen), und darüber hinaus entfernen Sie die text-align:right;, wird Ihre 'Einige Header' höchstwahrscheinlich so angezeigt, wie Sie es wollen.

Ein Hinweis: Sie haben eine Menge Inline-Stil in Ihrem HTML (und überzählige HTML - zu viele Tags - Sie haben Link-Tags innerhalb von Links unnötig - Sie können einige entfernen). Ich würde empfehlen, dass Sie die Inline-CSS in das CSS (vorzugsweise in einem CSS-Stylesheet) und nicht in das HTML-Dokument einfügen. Bei Bedarf können Sie eine Klasse hinzufügen, wenn Sie das gleiche Tag später mit einer Variation verwenden möchten.

hoffe, das hilft

Quelle

2017-03-08 18:09:49

Um den Header offensichtlich zu machen, änderte ich den Link 'a' Stil von weiß nach rot. So würde Ihr html mit html5 tags und decluttered html aussehen https://jsfiddle.net/RachGal/1tcpggst/ –

Ein Problem mit dem Headertext und seine Ausrichtung

Antwort

Verwandte Themen