在標題文本及其對齊方面存在問題

當我在瀏覽器上運行我的網站時，標題（Some Header）應居中在網頁的頂部，但其居中位於網頁的中間。我需要一些幫助來解決這個問題，但仍然保持標題在一個固定的位置。在標題文本及其對齊方面存在問題

<!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>

來源

2017-03-08 Noah Tanenholtz

加上'頂部：0;''到.header' –

謝謝，定了！ –

@NoahTanenholtz也許，但它使用絕對定位，不建議練習 –

HTML5有一個本地標籤header，你不需要將其定義爲一類，但是這是題外話。

如果您將您的位置修改爲相對（推薦），並且刪除text-align:right;，則您的「某些標題」很可能會按照您的要求顯示。

注意：你的html中有很多內聯樣式（和超多的html - 太多的標籤 - 你有不必要的鏈接鏈接標籤 - 你可以刪除一些）。我建議你把內聯的CSS與CSS（最好在CSS樣式表），而不是在HTML文檔。如有必要，如果您希望稍後使用同一個標籤和變體，則可以添加一個類。

希望這有助於

來源

2017-03-08 18:09:49

爲了使頭部變得明顯，我將鏈接'a'樣式從白色改爲紅色。這就是你的HTML看起來如何與html5標籤和decluttered html https://jsfiddle.net/RachGal/1tcpggst/ –

在標題文本及其對齊方面存在問題

回答

相關問題