搜尋

首頁  >  問答  >  主體

如何修復邊距

<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> </blockquote> <p> <pre class="brush:css;toolbar:false;">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%; }</pre> <pre class="brush:html;toolbar:false;"><!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></pre> </p> <p>圖片在最小化時應居中（佔據螢幕的一半），看起來不錯，但在充滿時，其居中但位於底部。 </p> <p><em>我才剛開始學習，所以我只知道 html 和 CSS 的最基本的</em>*</p>
P粉893457026P粉893457026478 天前561

全部回覆(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
  • 取消回覆