尝试使用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>
我希望徽标以我创建的“登录”表单为中心。
答案 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;
}