여백을 수정하는 방법
P粉893457026
2023-09-05 12:35:23
<p><strong>골 포스터입니다</strong></p>
<p><strong>이것은 제 포스터입니다</strong></p>
<p>내 코드를 읽고 내가 뭘 잘못하고 있는지/더 쉬운 방법이 있는지 알려줄 수 있나요?
이 프로젝트는 동기 부여 포스터 웹사이트를 만드는 것입니다. </p>
<인용문>
<p>할 일: 동기 부여 게시물 웹사이트를 만드세요.
원하는 대로 스타일을 지정하세요.
영감을 얻기 위해 대상 이미지를 살펴보세요.
그러나 다음과 같은 특성을 가져야 합니다. </p>
<올>
<li>기본 h1 텍스트는 Google Fonts의 Regular Libre Baskerville 글꼴을 사용해야 합니다.
https://fonts.google.com/specimen/Libre+Baskerville</li>
<li>텍스트는 흰색이고 배경은 검은색이어야 합니다. </li>
<li>자산 내의 이미지 폴더에 자신만의 이미지를 추가하세요. 5픽셀의 흰색 테두리가 있어야 합니다. </li>
텍스트는 중앙에 위치해야 합니다. </li>
<li>h1, p 및 이미지 요소를 포함하는 div를 만듭니다. 이미지와 텍스트가 페이지 중앙에 오도록 여백을 조정합니다.
팁: 너비를 50%로 설정하고 왼쪽 여백을 25%로 설정하여 div를 가로 중앙에 배치합니다.
팁: div를 채우려면 이미지 너비를 100%로 설정하세요. </li>
<li>CSS를 사용하여 대문자 h1에 대한 MDN 문서의 text-transform 속성을 읽어보세요.https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li>
</ol>
</인용문>
<p>
<pre class="brush:css;toolbar:false;">h1 {
색상: 흰색;
글꼴 모음: 'Libre Baskerville', 필기체;
}
피 {
색깔: 백색
}
몸 {
배경: 검정색;
}
#텍스트 {
텍스트 변환: 대문자;
}
#상자1 {
테두리: 5px 솔리드;
텍스트 정렬: 중앙;
색상: 흰색;
너비: 450px;
높이: 500px;
패딩 상단: 50px;
}
div {
너비: 50%;
높이: 100%;
왼쪽 여백: 25%;
마진 최고: 25%;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<링크
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel="스타일시트"
/>
</머리>
<본문>
<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">가자!!!</h1>
<p id="texts">우리가 해냈습니다</p>
</div>
</body>
</html></pre>
</p>
<p>사진은 最小化时应居中（据屏幕的一半），看起来不错，但充满时，其居中但位于底part.</p>
<p><em>저는 html과 CSS에 대한 정보를 알고 있습니다</em>*</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이것이 당신이 원하는 것인가요? 添加到
으아악
으아악
text-align: center;添加到#texts以使两个文本元素居中。我已将父级#box1并添加display: flex; justify-content: center;所以基本上我已经使用 Flexbox 水平居中#box1추가했습니다. 당신이 원하는 것 같습니다.