如何修复边距-PHP中文网问答

这是进球海报

这是我的海报

你能读一下我的代码并告诉我我做错了什么/是否有更简单的方法该项目是制作一个励志海报网站。

TODO：创建一个励志帖子网站。随心所欲地设计风格。查看目标图像以获取灵感。但它必须具备以下特点：

主要的 h1 文本应使用 Google Fonts 中的 Regular Libre Baskerville 字体： https://fonts.google.com/specimen/Libre+Baskerville

文本应为白色，背景为黑色。

将您自己的图像添加到资源内的图像文件夹中。它应该有一个 5 像素的白色边框。

文本应居中对齐。

创建一个 div 来包含 h1、p 和 image 元素。调整页边距，使图像和文本位于页面中央。提示：通过将 div 的宽度设置为 50%，将其左边距设置为 25%，从而将其水平居中。提示：将图像宽度设置为 100%，以填充 div。

阅读 MDN 文档上的 text-transform 属性，以使用 CSS 将 h1 变为大写。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

h1 {
    color: white;
    font-family: 'Libre Baskerville', cursive;
}

p {
    color: white
}

body {
    background: black;
}


#texts {
    text-transform: uppercase;
}


#box1 {
    border: 5px solid;
    text-align: center;
    color: white;
    width: 450px;
    height: 500px;
    padding-top: 50px;
}


div {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-top: 25%;
}

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
            rel="stylesheet"
        />
    </head>

    <body>
        <div id="box1">
            <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
            <img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" />

            <h1 id="texts">let's a go!!!</h1>
            <p id="texts">we did it</p>
        </div>
    </body>
</html>

图片在最小化时应居中（占据屏幕的一半），看起来不错，但在充满时，其居中但位于底部。

我才刚刚开始学习，所以我只知道 html 和 CSS 的最基本的*

h1 { color: white; font-family: "Libre Baskerville", cursive; } p { color: white; } body { background: black; } #texts { text-transform: uppercase; text-align: center; } #box1 { border: 5px solid; color: white; width: 450px; } .container { display: flex; justify-content: center; }

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" /> </head> <body> <div class="container"> <div id="box1">  <img src="https://picsum.photos/640/480" alt="" width="100%" height="100%" /> </div> </div> <h1 id="texts">let's a go!!!</h1> <p id="texts">we did it</p> </body> </html>