这是进球海报
这是我的海报
你能读一下我的代码并告诉我我做错了什么/是否有更简单的方法 该项目是制作一个励志海报网站。
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 { 白颜色; 字体系列：“Libre Baskerville”，草书； } p { 白颜色 } 身体 { 背景：黑色； } #文本{ 文本转换：大写； } #框1 { 边框：5px实线； 文本对齐：居中； 白颜色; 宽度：450px； 高度：500px； 顶部填充：50px； } div { 宽度：50%； 高度：100%； 左边距：25%； 保证金上限：25%； };<头> >> <链接 href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="“样式表”"> > <正文>开始吧！！！
我们做到了
图片在最小化时应居中（关注屏幕的一半），看起来不错，但在充满时，其居中但位于底部。
我才刚刚开始学习，所以我只知道html和CSS的沟通*
这就是你想要的吗？我已将
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; }