material-ui网格内的居中组件
在material-ui网格内实现居中组件的方法有多种。以下是其中几种常见的方法：
- 使用Flex布局：在material-ui的Grid组件中，可以通过设置container属性为true来创建一个Flex容器。然后，通过设置justify属性为"center"和alignItems属性为"center"，可以将子组件居中对齐。例如：
import { Grid } from '@material-ui/core';
<Grid container justify="center" alignItems="center">
{/* 居中的组件 */}
</Grid>- 使用Grid布局：在material-ui的Grid组件中，可以通过设置item属性为true来创建一个Grid项。然后，通过设置justify属性为"center"和alignItems属性为"center"，可以将子组件居中对齐。例如：
import { Grid } from '@material-ui/core';
<Grid container>
<Grid item xs={12} sm={6} md={4} lg={3} justify="center" alignItems="center">
{/* 居中的组件 */}
</Grid>
</Grid>- 使用CSS样式：在material-ui的Grid组件中，可以通过自定义CSS样式来实现居中对齐。例如：
import { Grid } from '@material-ui/core';
const styles = {
center: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
};
<Grid container>
<Grid item xs={12} sm={6} md={4} lg={3} style={styles.center}>
{/* 居中的组件 */}
</Grid>
</Grid>以上是几种常见的在material-ui网格内实现居中组件的方法。根据具体的需求和场景，可以选择适合的方法来实现居中对齐。
相关·内容
3回答
material-ui网格内的居中组件
javascript、css、reactjs、material-ui
我想使用相同的卡片并使它们居中对齐，我搜索并尝试了一些解决方案，但所有这些解决方案都只对齐组件网格，而不是组件内容本身(我需要它们与边界和它们本身的距离相等)。
<Grid item xs={6}> </Grid> </Grid>
卡片代码是无关紧要的，但我
浏览 19提问于2019-03-27得票数 15
回答已采纳
2回答
在material-ui react应用程序中集中对齐网格
css、reactjs、material-ui、grid
我想水平居中网格容器内的网格项目。还需要在网格项目之间留出一些间距。请找到下面的代码： import React from "react";import {Container, Grid } from "@material-ui/core";
impor
浏览 25提问于2020-12-30得票数 0
回答已采纳
8回答
如何在MUI中居中组件并使其具有响应性？
reactjs、authentication、mobile、material-ui、desktop
我不太理解React Material-UI网格系统。如果我要使用表单组件进行登录，在所有设备(移动设备和台式机)的屏幕上将其居中的最简单方法是什么？
浏览 113提问于2018-06-09得票数 125
回答已采纳
2回答
在布局中设置Material-UI垂直和居中对齐网格项目
reactjs、material-ui
我是Material-UI的新手，我希望有这个网格组件的基本实现：但是到目前为止，我还不能正确地将网格项目居中。我尝试了不同的方法，但都没有奏效。这是我到目前为止的代码： <Grid item> &l
浏览 7提问于2021-03-10得票数 0
回答已采纳
1回答
用于材料用户界面的maxWidth打开对话框(模态)
reactjs、material-ui
我正在尝试将max-width设置在material-ui的Dialog组件上。当我设置最大宽度时，这个模式就会被忽略。我在这里创建了一个最小的示例：import React from 'react'import MuiThemeProvider from 'mat
浏览 2提问于2017-06-08得票数 4
回答已采纳
1回答
如何使元素在材质Ui网格内居中
reactjs、material-ui
我试图在material-ui的网格中居中元素，但它不会居中项目。direction="row" justify="center" alignItems="center"></Grid>
我试着这样做，但就像下面的图片一样，它不会在边界内居中
浏览 15提问于2021-03-07得票数 0
回答已采纳
1回答
如何仅使用material-ui居中窗体？
reactjs、material-ui
无论如何，我想要居中我的“表单”，在摆弄了Material-UI文档中的代码和我对css的知识之后，我设法使“表单”居中，但只是水平居中，似乎不能使它垂直居中。我还不知道如何使用我自己的css代码以及material-ui中提供的功能，事实上，我希望这是纯粹的material-ui，因为我觉得将css与Material-UI一起使用会使事情变得更
浏览 2提问于2021-05-08得票数 0
2回答
Material-UI:如何将分页按钮居中？
reactjs、typescript、material-ui
我试图从Material-UI获取分页，但我想将箭头按钮和页数居中。我试图通过创建一个<div style={{textAlign: "center"}}>来居中，但它不起作用，因为它都放在一个盒子里。
有没有办法进入this组件并使数字和按钮居中？
浏览 9提问于2021-09-27得票数 1
1回答
如何在Material-UI AppBar中将标题水平居中
javascript、reactjs、material-design、material-ui
我找不到在React Material UI AppBar中居中显示标题的方法。也许我错过了什么。在StackOverflow上几乎没有其他的答案，但这些似乎不是最好的方法。
浏览 9提问于2019-09-06得票数 2
回答已采纳
2回答
哪种反应材料-UI组件添加一个间距到我的页面(就像一个行类在引导)？
reactjs、material-ui、react-material
我已经创建了一个使用React和进行React的项目。<div class="row"> ...</div>但我不知道用什么组件来创建这样的间距。
我目前正在使用自定义类来创建某种间隔，
浏览 7提问于2019-11-07得票数 3
回答已采纳
2回答
Material-ui 4.11.4 - Grid:列中的项目需要容器方向=‘row’才能正确显示(??)
html、css、material-ui、css-grid
我希望在列中有几个div，在页面轴上居中，并在div宽度允许的情况下在宽度上拉伸。我使用的是material-ui 4.11.4 (最新版本)的<Grid>组件(包括container和item)：在上图中，所有网格项都具有xs={12}，而“页面正文”具有xs={10}</Grid>
然而，如果我想要上一张图中显示的效果，我必须给container一个属性direction='row'
浏览 8提问于2021-06-04得票数 0
回答已采纳
1回答
如何删除MUI网格中额外的右边距/空格？
html、css、reactjs、material-ui
下面的MUI网格示例似乎在网格的右侧创建了额外的空间，并使网格看起来并没有占据页面上可用的整个空间。 ? + 8px);} Sandbox example import React from "react";import Paper from "@
浏览 31提问于2021-07-22得票数 3
回答已采纳
1回答
(React/ material-ui )material-ui中纸张组件内的居中文本
css、reactjs、material-ui
我一直在尝试在material ui中居中放置纸张组件中的文本，目前什么都不起作用。我尝试在父组件中使用display:flex，在子组件中使用align-items:center，我尝试使用padding5px来获得相等的填充，但它不起作用，并且绝对尝试了text-align和垂直对齐，所有这些都不起作用，如下所示：
我尝试将文本放在底部的三个框中(material-ui中的纸质组件)
浏览 11提问于2021-02-24得票数 0
回答已采纳
1回答
错误:找不到模块'material-ui/Grid‘
reactjs、material-ui
我正在制作一个ReactJS项目，除了网格和单选按钮之外，我对任何material-ui组件都没有任何问题。他们给了我一个错误为什么大多数组件都可以找到，而这两个组件却找不到？
浏览 12提问于2018-01-09得票数 1
回答已采纳
1回答
在Material v5中使用X栅格
reactjs、material-ui
根据他们的文档“数据网格组件支持v5和v4”，我开始使用新的v5 alpha material-ui构建react应用程序。所以我安装了X网格，当我导入X网格时，我得到了这个错误： ./node_modules/@material-ui/x-grid/dist/index-esm.js 找不到模块:无法解析'C:\Users\remusp\Desktop\React\material\node
浏览 22提问于2021-07-11得票数 0
回答已采纳
1回答
在material-ui中为网格项目指定"justify“的最佳方式是什么？
reactjs、material-ui
我从material-UI库中得到了一个简单的网格。看起来是这样的： <Grid item sm={6}> </Grid> <ItemStatusFilter/></Grid>
我只是不能理解如何将
浏览 4提问于2019-02-02得票数 9
回答已采纳
1回答
无法在中心显示材料ui快捷栏
css、reactjs、material-ui
下面是我试图传递的属性，使它显示在屏幕的中心，但它显示在屏幕的顶部。center", }} https://codesandbox.io/s/snackbar-background-color-f37po就是一个展示这个问题的例子
浏览 16提问于2020-01-29得票数 4
回答已采纳
1回答
制作材质-UI Appbar/网格响应式- ReactJS
reactjs、material-ui、css-grid
我使用Material-UI@next AppBar构建了一个页脚，我想在网格中居中对齐图标，并且在响应时，每个网格项目都应该在新行中居中对齐。敬请指教。在桌面模式下，它们都应该在一条直线上。这是我的代码： import { Grid, Stack, Typographyimport React from "react&q
浏览 12提问于2021-08-19得票数 0
1回答
如何在Styled-Components中更改一个组件的样式，而不创建新的组件？
reactjs、styled-components
我在我的文件LoginWrapper.js中包含了Material Design Grid的导入：我正在尝试更改此组件：import Grid from '@material-ui/core/Grid';
const GridMateria
浏览 10提问于2020-02-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
