使徽标与Material-UI居中对齐

时间:2019-11-07 23:19:06

标签: css reactjs material-ui

尝试使用Material-UI在登录表单中将徽标居中,其他所有内容似乎都位于居中位置,但徽标位于卡的左侧。

我尝试在img标签下添加align="center"justify="center",但是它仍然没有在卡的中央移动图像。我还尝试过在我的const样式下添加“ gridItem” alignItems:'center'

const styles = theme => ({
    logo: {
        padding: "1rem",
        width: 300,
        [theme.breakpoints.down("sm")]: {
            width: 200,
        }
    },

    appName: {
        color: '#2979ff',
        [theme.breakpoints.down("sm")]: {
            fontSize: theme.typography.h5.fontSize
        }
    },
});
<Grid container justify="center" alignItems="center">
    <Grid item>
    <Card>
    <Grid item> 
    <img className={classes.logo} alt="Portal Logo" src={Logo} align="center" />
</Grid>

我希望徽标以我创建的“登录”表单为中心。

2 个答案:

答案 0 :(得分:1)

您正在使用flexbox,因此最好在像这样的父元素上使用justifyContent: center;

<Grid container justify="center" alignItems="center">
    <Grid item>
    <Card>
    <Grid item justifyContent="center"> 
    <img className={classes.logo} alt="Portal Logo" src={Logo} align="center" />
</Grid>

答案 1 :(得分:0)

尝试以text-align:center为徽标的父元素

HTML

<div class="logo">
  <img src="logo.png">
</div>   

CSS

.logo{
   text-align:center;
}