标题文本及其对齐有问题答案

【问题标题】：Having an issue with the header text and its alignment标题文本及其对齐有问题
【发布时间】：2017-03-09 02:45:37
【问题描述】：

当我在浏览器上运行我的网站时，标题（一些标题）应该位于网页顶部的中心，但它位于网页的中间。我需要一些帮助来解决此问题，但仍将标题保持在固定位置。

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

【问题讨论】：

将top:0; 添加到.header
谢谢，解决了！
@NoahTanenholtz 可能，但它使用绝对定位，不建议这样做

标签： html css header alignment center

【解决方案1】：

html5有一个原生标签header，你不需要将它定义为一个类，但这是一个旁白。

如果您将您的位置修改为相对（推荐），此外，删除 text-align:right; ，您的“某些标题”很可能会按照您的意愿出现。

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

希望对你有帮助

【讨论】：

为了使标题更明显，我将链接“a”样式从白色更改为红色。这就是您的 html 使用 html5 标签和整洁的 html jsfiddle.net/RachGal/1tcpggst 的外观