在标题文本及其对齐方面存在问题

问题描述：

当我在浏览器上运行我的网站时，标题（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>

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

谢谢，定了！ –

@NoahTanenholtz也许，但它使用绝对定位，不建议练习 –

答

HTML5有一个本地标签header，你不需要将其定义为一类，但是这是题外话。

如果您将您的位置修改为相对（推荐），并且删除text-align:right;，则您的“某些标题”很可能会按照您的要求显示。

注意：你的html中有很多内联样式（和超多的html - 太多的标签 - 你有不必要的链接链接标签 - 你可以删除一些）。我建议你把内联的CSS与CSS（最好在CSS样式表），而不是在HTML文档。如有必要，如果您希望稍后使用同一个标签和变体，则可以添加一个类。

希望这有助于

为了使头部变得明显，我将链接'a'样式从白色改为红色。这就是你的HTML看起来如何与html5标签和decluttered html https://jsfiddle.net/RachGal/1tcpggst/ –

在标题文本及其对齐方面存在问题

相关推荐