I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:-

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

CSS code:-

.container{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    padding: 10px;
    border-radius: 18px;
    text-align: center;
}

I have attempted to position the container div at the center, but it's not aligning properly

htmlcsswebfrontend

Answer №1

To center the container, wrap it in another div and use flex with justify-content:center

<style>
  .container {
    background-color: white;
    max-width: 400px;
    padding: 10px;
    border-radius: 18px;
    text-align: center;
  }
  .main-div{
    display: flex;
    justify-content: center;
  }
</style>

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

Answer №2

One possible solution to your problem could be adjusting the margin property to auto.

.wrapper{
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    margin:auto;
}
<body>
  <div class="wrapper">
    <div class="image">
      <img src="./images/image-design.png" alt="design image">
    </div>
    <div class="content">
      <h2>Enhance your design skills with practical projects</h2>
      <p>Unlock new possibilities by exploring different design concepts and techniques</p>
    </div>
  </div>
</body>

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

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

javascriptjqueryhtmlbootstrap-4

What measures can I implement to prevent unauthorized access to my user login page?

Hey there! I'm currently working on an API project that involves setting up a login system using NodeJs and a mySQL database. Although I've successfully connected to the database and created a basic login page, I'm encountering an issue whe ...

htmlmysqlnode.jsexpress

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

I'm facing a rather peculiar problem. I'm currently in the process of creating a webpage tailored for an iPhone screen resolution of: width: 640; height: 960; However, there seems to be a mysterious hidden element that is extending the width of ...

iphonehtmlcss

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

htmlcssangular

Hamburger Icon in Bootstrap Navbar-Brand is not aligned as expected

I'm currently working on a website project using Bootstrap and have encountered an issue with the navbar component. When the screen shrinks to the breakpoint I've defined (lg), the alignment of the hamburger icon gets disrupted, as shown below. ...

htmlcssbootstrap-5

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

A guide on applying color from an API response to the border-color property in an Angular application

When I fetch categoryColor from the API Response, I set border-left: 3px solid {{element.categoryColor}} in inline style. Everything is functioning correctly with no development issues; however, in Visual Studio, the file name appears red as shown in the i ...

htmlcssangulartypescript

How about: "Insert a line break inside a div element"

My goal is to have 3 icons positioned side by side that will float left if the window shrinks. Under each icon, I plan to include some text. Below you can see that I've made progress on this layout. .icons { BORDER-TOP: black 1px solid; HEIGHT: 10 ...

htmlcss

Send the value of an li element using AJAX when clicked back to the original page

I'm currently working on passing the data-value of the < li > element that I clicked on to PHP within the same page. My approach involves using AJAX to send the data to PHP for querying purposes. While it seems like the AJAX request is functioni ...

phpjqueryhtmlajaxpost

Combining various functions into a single button

I am currently working on creating a full-screen menu that functions like a modal. Everything seems to be working fine, except for the fadeOut animation. Can someone please help me understand what is causing issues with my scripts/codes? I want the content ...

javascripthtmlcssanimation

Struggling to get the onHover effect working with the Grid item component in MaterialUI

I'm currently working on a Grid layout with nested Grid components, but I've run into an issue where applying inline styles to the Grid item component isn't working as expected. As a newcomer to MaterialUI in ReactJS, I could really use some ...

cssreactjsmaterial-uihover

Passing an undefined value to the database via AJAX upon clicking a button

Hi there, I'm currently working on a table where I'm trying to perform an inline edit and update the value in the database by clicking on a button (an image). I've attempted to use an onclick function, but it seems to show "value=undefined&a ...

javascriptphpjqueryhtmlajax

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

javascripthtmlcssseleniumselenium-webdriver

Discover the power of integrating JSON and HTTP Request in the Play Framework

My aim is to develop a methodology that can effectively manage JSON and HTTP requests. This approach will facilitate the transition to creating both a Webapp and a Mobile App in the future, as JSON handling is crucial for processing requests across differe ...

javascriptjsonmobilewebplayframework

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

cssangulartypescriptdeploymentgithub-pages

Issue with inner span not inheriting max-width set on outer <td> element

Whenever I hover over a table cell, the Angular Bootstrap popover should appear next to the text. However, the 'span' element remains at its full width. <td style="max-width: 50px; text-align: left; white-space:nowrap; overflow:hidden; text- ...

htmlcssangular-ui-bootstrap

"Create a unique visual layout with CSS using a four-grid

When utilizing four div grids and increasing the content size of table 2, it causes table 3 to align with table 4, creating a large gap between tables 1 and 3. Is there a way to adjust the responsive content sizing for tables 1, 3, 5... and 2, 4, 6... in o ...

htmlcss