如何使用 Material-UI 在 React 中垂直对齐卡片中的按钮？答案

【问题标题】：How to align buttons in cards vertically in center in React using Material-UI?如何使用 Material-UI 在 React 中垂直对齐卡片中的按钮？
【发布时间】：2021-01-08 14:20:43
【问题描述】：

我使用material-ui在ReactJS中制作了3张卡片，所以我面临的问题是第一张卡片的段落很小，第二张和第三张卡片的段落有点大，所以当我放置按钮时所有 3 张卡片中的按钮都不同，因此每个段落的按钮在垂直中心未正确对齐。

我附上了我面临的问题的图片。 [1]：https://i.stack.imgur.com/ZkGVc.jpg

这里是 CodeSandBox 链接：-https://codesandbox.io/s/vigilant-sanderson-yp491?fontsize=14&hidenavigation=1&theme=dark

下面是我的 ReactJS 和 material-ui 代码

const Room = ({room}) => {
    const classes = useStyles() ;
    return (
    <Card className={classes.root}className={classes.cards}>
        <CardMedia className={classes.media} image={room.image} title={room.name}/>
        <CardContent>
                  <div className={classes.CardContent}>
                      <h2>{room.name}</h2>     
                <Typography>
                    {room.description}
                </Typography>
                 </div>
                 <Button variant="outlined" color="primary" justify="space-around">
                Primary
            </Button>
                  </CardContent> 
                  <CardActions disableSpacing className={classes.CardActions}>
                  </CardActions>

    </Card>
    )
}

style.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
    media: {
    height: 280,
  },
  cards:{
    height:600
  },
  cardContent: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  cardActions: {
    justifyContent: 'space-between',
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
  },
  h5:{
    fontfamily: 'Ubuntu',
  },

}));

如何在保持段落大小相同的同时将每张卡片中的这些按钮垂直居中对齐？

【问题讨论】：

请创建一个沙箱 (codesandbox.com)
@AmareshSM 这是代码框链接：-codesandbox.io/s/…
我不确定你所说的垂直居中是什么意思。按钮应该放在哪里？从用户体验的角度来看，我认为当前的行为并没有那么糟糕。作为一种潜在的解决方案，也许您可以为描述段落设置一个固定的高度，并添加一个按钮来扩展文本或滚动条（很可能是一个细长的滚动条，而不是原生滚动条）。
@adrianmanduc 谢谢老兄！！因为它的想法。

标签： javascript html css reactjs material-ui

【解决方案1】：

正如评论中提到的，如果我很好地理解您想要实现的目标，一种可能的解决方案是让描述具有固定的高度。然后，您可以为其添加滚动条，因此按钮将对齐。或者，您可以使用“显示更多”按钮来展开内容，而不是滚动条。

我已经使用浏览器原生滚动条的示例更新了 codepen - codepen

要增强解决方案，您可以考虑使用纤细的滚动条解决方案，例如 react-perfect-scrollbar

【讨论】：

谢谢！！对于更增强的解决方案:)