Why isn't the justify-content property set to center in my CSS code functioning properly?

For a front-end challenge from Frontend Mentor, I attempted to center a card on the screen using justify-content: center, but it doesn't seem to be working as expected. Any suggestions on how to achieve this?

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

:root {
    --white: hsl(0,0%,100%);
    --lightgray: hsl(212,45%,89%);
    --grayishblue: hsl(220,15%,55%);
    --darkblue: hsl(218,44%,22%);
    font-family: outfit;
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--lightgray);
    font-family: 'outfit' sans-serif;
}

.card {
    background-color: white;
    max-width: 330px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 15px;
    padding:15px;

}

img {
    width: 100%;
    border-radius: 20px;
}

.qr-code {

    text-align: center;

}

h2 {
    color: var(--darkblue);

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link rel="stylesheet" href="styles.css">
    <title>Frontend Mentor | QR code component</title>

    <style>
        .attribution { font-size: 11px; text-align: center; }
        .attribution a { color: hsl(228, 45%, 44%); }
    </style>
</head>
<body>
    <div class="card">


        <img src="images/image-qr-code.png" alt="qr-code">
        <div class="qr-code">
        <h2>Improve Your front-end skills by building projects</h2>
        <p>Scan the QR code to visit Frontend Mentor your coding skills to the next level</p>
        </div>


    </div>
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="#">Your Name Here</a>.
    </div>
</body>
</html>

My goal is to successfully center the card on the screen for a Frontend Mentor challenge, but I'm facing issues with using justify-content: center. Any tips on how to fix this?

htmlcss

Answer №1

After researching the meaning of the justify-content property from w3schools, it is clear that it serves to align the items within a flexible container when there is extra space available on the main-axis (horizontal direction).

The definition specifies that the justify-content property affects the items within the flexible container, not the container itself.

It appears that you have applied the justify-content: center property to the .card element. Based on the definition provided, this means that the children of the .card element will be centered, not the .card element itself.

Furthermore, it is worth noting that the alignment specified is horizontal, as indicated in the definition.

Answer №2

To ensure the card is positioned in the center of the screen, it is necessary to enclose it in a wrapper. One alternative approach could involve setting the body as a flexbox, though I personally don't recommend it.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
:root {
  --white: hsl(0, 0%, 100%);
  --lightgray: hsl(212, 45%, 89%);
  --grayishblue: hsl(220, 15%, 55%);
  --darkblue: hsl(218, 44%, 22%);
  font-family: outfit;
  font-size: 15px;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--lightgray);
  font-family: 'outfit' sans-serif;
}

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card {
  background-color: white;
  max-width: 330px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 15px;
  padding: 15px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

img {
  width: 100%;
  border-radius: 20px;
}

.qr-code {
  text-align: center;
}

h2 {
  color: var(--darkblue);
}
<div class="wrapper">
  <div class="card">
    <img src="images/image-qr-code.png" alt="qr-code">
    <div class="qr-code">
      <h2>Improve Your front-end skills by building projects</h2>
      <p>Scan the QR code to visit Frontend Mentor your coding skills to the next level</p>
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
  </div>
</div>

Answer №3

Gerard has provided an excellent solution. Another method to center a div within the body is by utilizing the following code:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

For best results, encase your code in a container and apply the above CSS to it.

Update: The horizontal centering of your .card can be achieved with margin: 0 auto. Therefore, additional adjustments are unnecessary.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

:root {
    --white: hsl(0,0%,100%);
    --lightgray: hsl(212,45%,89%);
    --grayishblue: hsl(220,15%,55%);
    --darkblue: hsl(218,44%,22%);
    font-family: outfit;
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--lightgray);
    font-family: 'outfit' sans-serif;
}

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
    background-color: white;
    max-width: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 15px;
    padding:15px;
}

img {
    width: 100%;
    border-radius: 20px;
}

.qr-code {
    
    text-align: center;
    
}

h2 {
    color: var(--darkblue);
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE-edge>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png>
  <link rel="stylesheet" href="styles.css>
    <title>Frontend Mentor | QR code component>

    <style>
        .attribution { font-size: 11px; text-align: center; }
        .attribution a { color: hsl(228, 45%, 44%); }
      </style>
</head>
<body>
  <div class="container>
    <div class="card>
            <img src="images/image-qr-code.png" alt="qr-code>
            <div class="qr-code>
            <h2>Improve Your front-end skills by building projects>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level>
            </div> 
    </div>
    <div class="attribution>
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank>Frontend Mentor>. 
        Coded by <a href="#">Your Name Here>.
    </div>
  </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element. I have attempted to ...

javascriptjqueryhtmlcss

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Instructions for using an Angular directive to set focus on a "DIV" element when clicked <a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" ...

javascripthtmlangularjssetfocus

Discover Vuejs: Display Less, Reveal More

In order to achieve a specific task, I need to display 12 items in 4 columns with 4 items each. Initially, only the first four items are visible and the rest are hidden until the user clicks the "Show More" button. Upon clicking the button, the next row ...

htmlvue.js

Changing CSS attributes with jQuery when conditions are met

After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly. To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), ...

jquerycssif-statement

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). ...

htmlcssstickysticky-footer

Tips for adjusting image placement in cell or xs mode using bootstrap 4

Hope you're doing well. I have a specific requirement where I need the image to be displayed to the right of the title when switching to cellular xs mode. For instance, the title should take up col-xs-9 and the image should take up col-xs-3. In the pa ...

htmlcssbootstrap-4styles

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

javascriptjquerycssasp.nettwitter-bootstrap

Enhancing Your Navbar Brand with Images using Flexbox and Bootstrap

I've been working on a project where I decided to customize the Bootstrap navbar by breaking it up into flexboxes in order to align everything according to the specifications. However, I've encountered an issue while trying to place a logo in the ...

htmltwitter-bootstrapcss

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...

javascriptjqueryhtmlfirefoxbrowser

Exploring individual elements within a set of data, the age-old art of classic ASP

I am looking to extract specific elements from a "select" statement in order to populate a table on a website using Classic ASP. For instance, if my select statement below fetches these values; Name ID Alex Alex123 On the webpage, I would like th ...

htmlasp.netrecordset

What is the most effective method for digitally collecting a signature?

Currently, I am in the process of developing a website application using PHP that demands a signature from the user. This particular section of the website will only be accessible on Windows-based tablets. Hence, my inquiry is as follows: What method wo ...

phpflashhtmlcanvastablet

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

javascripthtmlhtml-datalist

How can I trim a value using one-way data binding in Angular?

Is there a way to trim values in Angular using one-way data binding? Can this be done directly in the component.html file rather than in typescript? I tried the following but it didn't work: <P>{{country.trim()}}</P> Thanks ...

htmlangular

Customize Bootstrap 4 borders within a row

I am currently facing an issue with my code, where there is a border at the bottom of every row. Click here to view the code Unfortunately, I have noticed that the border at the bottom of each row does not extend across the full width. This occurs even wh ...

cssbuttonbootstrap-4rowoverflow

floating downward inside the container

Check out my website at . Everything looks great in Firefox, but when I view it in IE, the "top" button that should be floated inside the h2 titled "Unit 301: Pre-production skills" is floating to the right and getting pushed outside of the heading. Any i ...

htmlcss

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

htmlcssaccessibility

Is there a way to have a border specifically on the top side?

Is there a way to have the border show up only on the top when hovering over it? Here's the current code I'm using: a:hover { border-top: 3px white; border-style: solid; } Even though this code is in place, the border still appears on ...

cssborder

Unexpected border-bottom styling issue observed on adjacent div elements

This is my unique code: <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div style="border-bottom:1px solid black"> <div style="width=50%;float:left">A new paragraph with u ...

htmlcss