How to fix margins
P粉893457026
2023-09-05 12:35:23
<p><strong>This is a goal poster</strong></p>
<p><strong>This is my poster</strong></p>
<p>Can you read my code and tell me what I'm doing wrong/if there's an easier way
The project is to create a motivational poster website. </p>
<blockquote>
<p>TODO: Create a website of motivational posts.
Style it however you want.
Look at target images for inspiration.
But it must have the following characteristics: </p>
<ol>
<li>The main h1 text should use the Regular Libre Baskerville font from Google Fonts:
https://fonts.google.com/specimen/Libre Baskerville</li>
<li>The text should be white and the background black. </li>
<li>Add your own images to the images folder within the assets. It should have a 5 pixel white border. </li>
<li>Text should be centered. </li>
<li>Create a div to contain the h1, p, and image elements. Adjust the margins so that images and text are centered on the page.
Tip: Center the div horizontally by setting its width to 50% and its left margin to 25%.
Tip: Set the image width to 100% to fill the div. </li>
<li>Read the text-transform property on MDN documentation for uppercase h1 using CSS.
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>The image should be centered (taking up half the screen) when minimized and looks good, but when full it is centered but at the bottom. </p>
<p><em>I have just started learning, so I only know the basics of html and CSS</em>*</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Is this what you want? I've added to
text-align: center;to#textsto center the two text elements. I have added parent#box1and addeddisplay: flex; justify-content: center;so basically I have used Flexbox horizontally Center#box1. Looks like what you want.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>