search

Home  >  Q&A  >  body text

How to fix margins

<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>
P粉893457026P粉893457026479 days ago562

reply all(1)I'll reply

  • P粉155551728

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

    Is this what you want? I've added text-align: center; to #texts to center the two text elements. I have added parent

    to #box1 and added display: 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>

    reply
    0
  • Cancelreply