<p><strong>这是进球海报</strong></p>
<p><strong>这是我的海报</strong></p>
<p>你能读一下我的代码并告诉我我做错了什么/是否有更简单的方法
该项目是制作一个励志海报网站。</p>
<blockquote>
<p>TODO：创建一个励志帖子网站。
随心所欲地设计风格。
查看目标图像以获取灵感。
但它必须具备以下特点：</p>
<ol>
<li>主要的 h1 文本应使用 Google Fonts 中的 Regular Libre Baskerville 字体：
https://fonts.google.com/specimen/Libre+Baskerville</li>
<li>文本应为白色，背景为黑色。</li>
<li>将您自己的图像添加到资源内的图像文件夹中。它应该有一个 5 像素的白色边框。</li>
<li>文本应居中对齐。</li>
<li>创建一个 div 来包含 h1、p 和 image 元素。调整页边距，使图像和文本位于页面中央。
提示：通过将 div 的宽度设置为 50%，将其左边距设置为 25%，从而将其水平居中。
提示：将图像宽度设置为 100%，以填充 div。</li>
<li>阅读 MDN 文档上的 text-transform 属性，以使用 CSS 将 h1 变为大写。https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li>
</ol>
</块引用>
<p>
h1 {
白颜色;
字体系列：“Libre Baskerville”，草书；
}
p {
白颜色
}
身体 {
背景：黑色；
}
#文本{
文本转换：大写；
}
#框1 {
边框：5px实线；
文本对齐：居中；
白颜色;
宽度：450px；
高度：500px；
顶部填充：50px；
}
div {
宽度：50%；
高度：100%；
左边距：25%；
保证金上限：25%；
}</pre>
;
<头>
>
>
<链接
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel =“样式表”
>>
</头>
<正文>
<div id="box1">
<h1 id="texts">开始吧！！！</h1>
<p id="texts">我们做到了</p>
</正文>
</html></pre>
</p>
<p>图片在最小化时应居中（关注屏幕的一半），看起来不错，但在充满时，其居中但位于底部。</p>
<p><em>我才刚刚开始学习，所以我只知道html和CSS的沟通</em>*</p>
这就是你想要的吗？我已将 添加到
text-align: center;添加到#texts以使两个文本元素居中。我已将父级#box1并添加display: flex; justify-content: center;所以基本上我已经使用 Flexbox 水平居中#box1。看起来就像你想要的。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="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> --> <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>