搜索

首页  >  问答  >  正文

如何修复边距

<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>
P粉893457026P粉893457026494 天前571

全部回复(1)我来回复

  • P粉155551728

    P粉1555517282023-09-06 00:39:04

    这就是你想要的吗？我已将 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>

    回复
    0
  • 取消回复