Flex just can't seem to align correctly

I'm having trouble getting this to work properly. I am using React and styled components, but the justify/content alignment is not functioning as expected.

The setup includes a div with flex properties, where the flex direction is set to column. Within this div, there is a header div and a body div with the flex-grow property set to 1 to ensure it takes up the full height of the container.

Although the body element occupies the full height as intended, I'm struggling to center the content vertically within this div. I have attempted various combinations of aligning and justifying on both the parent and body divs, without success - and I'm unsure why that might be.

Here's my code:

const Div = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-self: center;

  & > * :nth-child(2){
    flex-grow: 1;
    background-color: red;
  }
`

const OuterWrapper = styled.div`
  padding: 10vw 1.5rem;
  overflow: hidden;
  // This div contains the content I want to center

Any insights into why it's not working?

cssreactjsflexboxstyled-components

Answer №1

For creating your enclosure:

display: flex;
justify-content: center;
align-items: center;

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

CSS/jQuery animation alignment problem

Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next pag ...

jqueryhtmlcsscss-animations

When attempting to perform a GET request for registry.npmjs.org/react, `create-react-app` becomes un

I'm embarking on my first project using create-react-app, but I've encountered an issue with a spinning spinner that consists of just a period next to react. > npx create-react-app github-finder --verbose Creating a new React app in C:\d ...

node.jsreactjsnpmcreate-react-app

Unit testing with Jest involves creating mock implementations of IF conditions within functions to ensure complete code coverage

Currently, I am working with an API script stored in a file. const ApiCall = { fetchData: async (url) => { const result = await fetch(url); if (!result.ok) { const body = await result.text(); // uncovered line throw new Error(`Err ...

javascriptreactjsjestjsenzyme

Utilizing jQuery to seamlessly animate decimal values

Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/ Required ...

javascriptjqueryhtmlcssanimation

Exploring nested components traversal in React

In my project, I have created a product component that displays the products' name, price, and description. const Product = (props) =>{ return( <div> <p>Price: {props.price} </p> <p>Name: ...

javascriptarraysreactjs

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

javascripthtmlcssangularjstwitter-bootstrap

What is the best way to simulate fetch in Redux Async Actions?

When writing tests in the Redux Writing Tests section, how does store.dispatch(actions.fetchTodos()) not trigger the fetch method when store.dispatch is directly calling actions.fetchTodos? The issue arises when trying to run similar code and encountering ...

javascriptunit-testingreactjsreduxredux-thunk

Troubleshooting image loading issues on Github Pages with Next.js

For the past month, I've been struggling to get photos and a favicon to load on my GitHub pages with no success. I even attempted using a boilerplate project from npx create-next-app@latest, but it still couldn't load the images and favicon from ...

reactjsnext.jsgithub-pages

Mastering React Native: The Art of Focusing a TextInput Encased within a Custom Component

Within my React Native application, I am utilizing a unique custom component that envelops a TextInput. As I navigate through the code where this custom component is implemented, I aim to trigger the .focus() method on the TextInput. Initially, my attempt ...

reactjsreact-nativefocustextinput

The 'filter' attribute is not found in the 'ContextProps' type

I am currently working on a project in Next.js 13 where I am trying to render card items conditionally based on their status. The TypeScript version being used is "5.2.2". However, I encountered an error that says: Property 'filter' does not exis ...

reactjstypescriptnext.jsreact-typescript

Invoke a function in Redux when the user interacts with a button

DISCLAIMER I have just started exploring Redux recently >.< In my application, I have implemented a confirmation modal (see image below) that can be triggered from any component. The implementation utilizes Redux for managing the state. https://i.s ...

reactjsreduxreact-redux

Setting up a specific print media query for the body element through JavaScript

I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...

javascriptjquerycssmedia-queries

What is the method to change lowercase and underscores to capitalize the letters and add spaces in ES6/React?

What is the best way to transform strings with underscores into spaces and convert them to proper case? CODE const string = sample_orders console.log(string.replace(/_/g, ' ')) Desired Result Sample Orders ...

javascriptreactjsecmascript-6

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

javascripthtmlcss

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

htmlcss

plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // can be used selectively for specific modules options: { modules: ... } }) ]

const webpack = require("webpack"); const path = require("path"); const DIST_DIR = path.resolve(__dirname, "dist"); const SRC_DIR = path.resolve(__dirname, "src"); const config = { entry: SRC_DIR + "/app/index.js", output: { path: DIST_DI ...

reactjswebpackbabel-loader

Adjusting the dimensions of the image carousel

Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...

jquerycssrazorbootstrap-4

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

When using the tabview component from PrimeNG, I am encountering an issue where I am unable to bind a header style class. Here is my static HTML code that works: <p-tabPanel header="Title" headerStyleClass="badge" formGroupName=&quo ...

htmlcssangularprimeng

Convert potentially undefined boolean into a boolean by utilizing "!!"

Just had a thought - when dealing with a potentially undefined boolean variable, is it advisable to cast it as a boolean using the double exclamation mark? Consider this interface: interface Example { id: number; isDisabled?: boolean; } We then have ...

reactjstypescriptredux-toolkitrtk-query

Executing multiple AJAX requests within an AJAX success callback loop

After analyzing the code below, it appears that the component is being rendered before the completion of the rest call, resulting in an empty DOM. The second ajax request within the loop will be triggered 50 times due to the 50 direct reportees under a man ...

jqueryreactjsajaxrestspfx