如何使标题的大小在两个边距中相等？答案

【问题标题】：How to make a header's size be equal in both margins?如何使标题的大小在两个边距中相等？
【发布时间】：2021-01-26 00:19:59
【问题描述】：

我是 CSS 新手，一周半前开始接触 CSS，我遇到了一个很难解决的问题。我需要我的网页来查看 Like this，我尝试了很多东西，但我还没有找到解决方案。看起来不太对，看起来不像50%-50%

<body>
    <header class= "header">
            <div class="box-1">
                <h1>TOP STUDENTS</h1>
                <b>Historic best averages</b>
            </div>
    </header>


/*Now to CSS*/
.header{
    display: inline-block;
    top:2vw;
    left:2vh;
    width:50vh;
    right:2vh;
    height:5vh;
    margin:5% 25%;
    position:relative;
}

.box-1{
    min-width:400px;
    min-height:60px;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    box-sizing:border-box;
    border: 4px rgba(24, 26, 1, 0.705) solid;
    font-size:24px;
    display:inline-block;
    background-color: rgba(200, 220, 150, 0.7);
    box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}

.box-1:hover{
    width:400px;
    height:110%;
    font-size:30px;
    background-color:rgba(226, 208, 40, 0.822);
    transition: 2s;
}

我有两台分辨率不同的显示器，当我交换页面时，它会自行破坏，但目标并没有纠正这一点，因为这不是练习所要求的。我已经在这里尝试了一些建议的解决方案，但似乎没有任何效果。我显然做错了什么 enter image description here 在我开始纠正它并使页眉看起来像它应该的样子（橙色是页眉）之前，该页面做得很好，但它是不正确的。谢谢 非常重要的说明：我不能使用 flexbox，因为练习明确告诉我不要。

【问题讨论】：

标签： html css header block margin

【解决方案1】：

以下是您应该尝试添加到代码中的 CSS 重置：

body {
   margin: 0;
   padding: 0;
}

您的问题很模糊，而且您的要求也不是很清楚。另外，当我运行您提供的代码时，它与您在图像中提供的代码不同..

我现在已经查看了您的代码，您实际上不应该将您的大小应用到标题本身，而应该应用到其中的内容。我已经清理了代码和位并使用'margin-left：auto;'将其居中和'margin-right: auto;'。

查看下面的代码，如果有帮助，请告诉我：

        body {
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 500px;
            position:relative;
            background-color: #121212;
        }

        .box-1{
            width: 400px;
            height: 200px;
            padding-top:5px;
            margin-left: auto;
            margin-right: auto;
            padding-bottom:5px;
            text-align: center;
            box-sizing: border-box;
            border: 4px rgba(24, 26, 1, 0.705) solid;
            font-size:24px;
            background-color: rgba(200, 220, 150, 0.7);
            box-shadow: inset 0 0 15px rgba(0,0,0,.5);
        }

        .box-1:hover{
            width: 500px;
            height: 260px;
            font-size:30px;
            background-color:rgba(226, 208, 40, 0.822);
            transition: 2s;
        }

<!DOCTYPE html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <header class= "header">
            <div class="box-1">
                <h1>TOP STUDENTS</h1>
                <b>Historic best averages</b>
            </div>
    </header>
</body>

【讨论】：

我目前正在学习，所以我可能做错了一切。我在样式 css 之前应用了重置和规范化器。经过几次尝试，使用您的代码确实看起来不错。谢谢。