如何修復邊距
P粉893457026
2023-09-05 12:35:23
<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>
這就是你想要的嗎?我已將 添加到
text-align: center;
新增至#texts
以使兩個文字元素居中。我已將父級#box1
並添加display: flex; justify-content: center;
所以基本上我已經使用Flexbox 水平居中#box1
。看起來就像你想要的。