Center component inside the material-ui gridHow to horizontally center a <div>?How to vertically center a div for all browsers?JavaScript closure inside loops – simple practical exampleHow to center absolutely positioned element in div?CSS center text (horizontally and vertically) inside a div blockHow to vertically align an image inside a divHow do I vertically center text with CSS?Center a column using Twitter Bootstrap 3Loop inside React JSXEqually spacing content inside a material-ui Grid item
How to check what is edible on an alien world?
Where to find an interactive PDF or HTML version of the tex.web documentation?
Why is drive/partition number still used?
Is it legal for private citizens to "impound" e-scooters?
How can religions be structured in ways that allow inter-faith councils to work?
To find islands of 1 and 0 in matrix
Correlation length anisotropy in the 2D Ising model
Does academia have a lazy work culture?
Melee or Ranged attacks by Monsters, no distinction in modifiers?
What is this spacecraft tethered to another spacecraft in LEO (vintage)
Converting 8V AC to 8V DC - bridge rectifier gets very hot while idling
Trapped in an ocean Temple in Minecraft?
Why is it considered Acid Rain with pH <5.6
What is the most common end of life issue for a car?
Unethical behavior : should I report it?
How to judge a Ph.D. applicant that arrives "out of thin air"
Vertical tennis ball into fancy new enumerate
How to avoid theft of potentially patentable IP when trying to obtain a Ph.D?
What do I do with a party that is much stronger than their level?
Japanese reading of an integer
Why did I lose on time with 3 pawns vs Knight. Shouldn't it be a draw?
The Sword in the Stone
Why do all my history books divide Chinese history after the Han dynasty?
Are there any examples of technologies have been lost over time?
Center component inside the material-ui grid
How to horizontally center a <div>?How to vertically center a div for all browsers?JavaScript closure inside loops – simple practical exampleHow to center absolutely positioned element in div?CSS center text (horizontally and vertically) inside a div blockHow to vertically align an image inside a divHow do I vertically center text with CSS?Center a column using Twitter Bootstrap 3Loop inside React JSXEqually spacing content inside a material-ui Grid item
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves).
I'm using this code (https://codesandbox.io/embed/32o8j4wy2q):
<Grid
container
spacing=0
direction="column"
alignItems="center"
justify="center"
style= minHeight: '80vh' >
<Grid container item xs=12 spacing=8>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
</Grid>
</Grid>
The card code is irrelevant but I just copied the material-ui's example one.
Also, how do I use flexboxes (or other tool) to auto align if I decide in the future to add or remove some cards?
javascript css reactjs material-ui
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
add a comment |
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves).
I'm using this code (https://codesandbox.io/embed/32o8j4wy2q):
<Grid
container
spacing=0
direction="column"
alignItems="center"
justify="center"
style= minHeight: '80vh' >
<Grid container item xs=12 spacing=8>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
</Grid>
</Grid>
The card code is irrelevant but I just copied the material-ui's example one.
Also, how do I use flexboxes (or other tool) to auto align if I decide in the future to add or remove some cards?
javascript css reactjs material-ui
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
have you tried to remove "inside container" ? or movealignItemsandjustifyto it ?
– Maielo
Mar 26 at 20:55
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
I would addmargin: autoto the innerdivwrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work:div[class^='MuiGrid-item-'] > div margin: auto;
– Teknotica
Mar 27 at 13:19
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31
add a comment |
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves).
I'm using this code (https://codesandbox.io/embed/32o8j4wy2q):
<Grid
container
spacing=0
direction="column"
alignItems="center"
justify="center"
style= minHeight: '80vh' >
<Grid container item xs=12 spacing=8>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
</Grid>
</Grid>
The card code is irrelevant but I just copied the material-ui's example one.
Also, how do I use flexboxes (or other tool) to auto align if I decide in the future to add or remove some cards?
javascript css reactjs material-ui
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves).
I'm using this code (https://codesandbox.io/embed/32o8j4wy2q):
<Grid
container
spacing=0
direction="column"
alignItems="center"
justify="center"
style= minHeight: '80vh' >
<Grid container item xs=12 spacing=8>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
<Grid item xs=6>
<Card />
</Grid>
</Grid>
</Grid>
The card code is irrelevant but I just copied the material-ui's example one.
Also, how do I use flexboxes (or other tool) to auto align if I decide in the future to add or remove some cards?
javascript css reactjs material-ui
javascript css reactjs material-ui
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
edited Mar 27 at 13:01
Pedro Vieira
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
asked Mar 26 at 18:39
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
5003 silver badges17 bronze badges
have you tried to remove "inside container" ? or movealignItemsandjustifyto it ?
– Maielo
Mar 26 at 20:55
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
I would addmargin: autoto the innerdivwrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work:div[class^='MuiGrid-item-'] > div margin: auto;
– Teknotica
Mar 27 at 13:19
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31
add a comment |
have you tried to remove "inside container" ? or movealignItemsandjustifyto it ?
– Maielo
Mar 26 at 20:55
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
I would addmargin: autoto the innerdivwrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work:div[class^='MuiGrid-item-'] > div margin: auto;
– Teknotica
Mar 27 at 13:19
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31
have you tried to remove "inside container" ? or move
alignItems and justify to it ?– Maielo
Mar 26 at 20:55
have you tried to remove "inside container" ? or move
alignItems and justify to it ?– Maielo
Mar 26 at 20:55
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
I would add
margin: auto to the inner div wrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work: div[class^='MuiGrid-item-'] > div margin: auto; – Teknotica
Mar 27 at 13:19
I would add
margin: auto to the inner div wrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work: div[class^='MuiGrid-item-'] > div margin: auto; – Teknotica
Mar 27 at 13:19
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31
add a comment |
1 Answer
1
active
oldest
votes
I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.
The code was done like this:
<Fragment>
<Grid
container
spacing=24
justify="center"
style= minHeight: '100vh', maxWidth: '100%'
>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
</Grid>
</Fragment>
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55364157%2fcenter-component-inside-the-material-ui-grid%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.
The code was done like this:
<Fragment>
<Grid
container
spacing=24
justify="center"
style= minHeight: '100vh', maxWidth: '100%'
>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
</Grid>
</Fragment>
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
add a comment |
I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.
The code was done like this:
<Fragment>
<Grid
container
spacing=24
justify="center"
style= minHeight: '100vh', maxWidth: '100%'
>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
</Grid>
</Fragment>
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
add a comment |
I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.
The code was done like this:
<Fragment>
<Grid
container
spacing=24
justify="center"
style= minHeight: '100vh', maxWidth: '100%'
>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
</Grid>
</Fragment>
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.
The code was done like this:
<Fragment>
<Grid
container
spacing=24
justify="center"
style= minHeight: '100vh', maxWidth: '100%'
>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
<Grid item xs=3 align="center">
<Card />
</Grid>
</Grid>
</Fragment>
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
answered Mar 27 at 18:24
Pedro VieiraPedro Vieira
5003 silver badges17 bronze badges
5003 silver badges17 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55364157%2fcenter-component-inside-the-material-ui-grid%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
have you tried to remove "inside container" ? or move
alignItemsandjustifyto it ?– Maielo
Mar 26 at 20:55
@Maielo I tried all of these. I made a CodeSandbox to help the visualization and tests codesandbox.io/embed/32o8j4wy2q
– Pedro Vieira
Mar 27 at 13:01
I would add
margin: autoto the innerdivwrapping the content. I couldn't fork your demo but adding this to the CSS seemed to work:div[class^='MuiGrid-item-'] > div margin: auto;– Teknotica
Mar 27 at 13:19
@Teknotica I tried it and it didn't work for me, I tried placing it inside the grid item and later, placing it in the container too. Did you removed some parameters?
– Pedro Vieira
Mar 27 at 13:31